From caabcb6e649e012fd1849f55fbef029593a00ea9 Mon Sep 17 00:00:00 2001 From: murashit Date: Sat, 30 May 2026 11:00:08 +0900 Subject: [PATCH] Add authored CSS modules --- src/styles/00-tokens.css | 96 ++++ src/styles/10-shared-ui.css | 149 ++++++ src/styles/11-shared-diff.css | 56 +++ src/styles/12-shared-motion.css | 11 + src/styles/20-chat-toolbar.css | 200 ++++++++ src/styles/21-chat-status-diagnostics.css | 252 ++++++++++ src/styles/22-chat-thread-list.css | 141 ++++++ src/styles/30-chat-layout.css | 170 +++++++ src/styles/31-chat-messages.css | 578 ++++++++++++++++++++++ src/styles/32-chat-user-input.css | 60 +++ src/styles/33-chat-composer.css | 78 +++ src/styles/34-chat-turn-diff-view.css | 52 ++ src/styles/40-threads-view.css | 217 ++++++++ src/styles/50-selection-rewrite.css | 126 +++++ src/styles/60-settings.css | 109 ++++ src/styles/90-responsive-overrides.css | 43 ++ src/styles/manifest.json | 18 + 17 files changed, 2356 insertions(+) create mode 100644 src/styles/00-tokens.css create mode 100644 src/styles/10-shared-ui.css create mode 100644 src/styles/11-shared-diff.css create mode 100644 src/styles/12-shared-motion.css create mode 100644 src/styles/20-chat-toolbar.css create mode 100644 src/styles/21-chat-status-diagnostics.css create mode 100644 src/styles/22-chat-thread-list.css create mode 100644 src/styles/30-chat-layout.css create mode 100644 src/styles/31-chat-messages.css create mode 100644 src/styles/32-chat-user-input.css create mode 100644 src/styles/33-chat-composer.css create mode 100644 src/styles/34-chat-turn-diff-view.css create mode 100644 src/styles/40-threads-view.css create mode 100644 src/styles/50-selection-rewrite.css create mode 100644 src/styles/60-settings.css create mode 100644 src/styles/90-responsive-overrides.css create mode 100644 src/styles/manifest.json diff --git a/src/styles/00-tokens.css b/src/styles/00-tokens.css new file mode 100644 index 00000000..e1b013ed --- /dev/null +++ b/src/styles/00-tokens.css @@ -0,0 +1,96 @@ +.codex-panel, +.codex-panel-chat-turn-diff, +.codex-panel-settings, +.codex-panel-threads, +.codex-panel-selection-rewrite { + --codex-panel-control-icon-size: var(--icon-m, 18px); + --codex-panel-radius-pill: 999px; + --codex-panel-size-icon-s: var(--icon-s, 16px); + --codex-panel-size-icon-xs: var(--icon-xs, 14px); + --codex-panel-size-clickable-icon: var( + --clickable-icon-size, + var(--icon-container-size, calc(var(--codex-panel-control-icon-size) + var(--codex-panel-control-gap) * 2)) + ); + --codex-panel-size-nav-item: var(--nav-item-size, 28px); + --codex-panel-size-settings-archived-list-max-height: 360px; + --codex-panel-size-settings-hook-list-max-height: 420px; + --codex-panel-size-toolbar-panel-max-height: 232px; + --codex-panel-size-toolbar-status-panel-max-height: 384px; + --codex-panel-size-message-collapse-max-height: 360px; + --codex-panel-size-message-collapse-fade-height: 72px; + --codex-panel-size-output-max-height: 420px; + --codex-panel-size-selection-rewrite-width: 520px; + --codex-panel-size-selection-rewrite-max-height: 560px; + --codex-panel-size-selection-rewrite-panel-margin: calc(var(--codex-panel-section-gap) * 3); + --codex-panel-size-selection-rewrite-preview-max-height: 180px; + --codex-panel-size-selection-rewrite-diff-max-height: 300px; + --codex-panel-size-selection-rewrite-debug-max-height: 160px; + --codex-panel-size-user-input-text-min-height: 26px; + --codex-panel-size-composer-input-max-height: 208px; + --codex-panel-size-composer-suggestions-max-height: 168px; + --codex-panel-icon-button-inline-size: calc(var(--codex-panel-control-icon-size) + var(--codex-panel-item-gap) * 2); + --codex-panel-icon-button-block-size: calc(var(--codex-panel-control-icon-size) + var(--codex-panel-control-gap) * 2); + --codex-panel-threads-row-actions-width: calc( + (var(--codex-panel-size-icon-s) + var(--codex-panel-control-gap) * 2) * 2 + var(--codex-panel-item-gap) + ); + --codex-panel-status-dot-size: var(--codex-panel-section-gap); + --codex-panel-meter-bar-height: var(--codex-panel-control-gap); + --codex-panel-composer-control-size: var(--codex-panel-icon-button-block-size); + --codex-panel-composer-min-height: calc((var(--codex-panel-composer-control-size) * 2) + var(--codex-panel-control-gap)); + --codex-panel-status-bar-clearance: var(--status-bar-height, calc(var(--codex-panel-section-gap) * 3)); + --codex-panel-bottom-safe-area: max(env(safe-area-inset-bottom, 0px), var(--codex-panel-status-bar-clearance)); + --codex-panel-toolbar-text-color: var(--text-muted); + --codex-panel-toolbar-text-size: var(--font-ui-small); + --codex-panel-toolbar-meta-size: var(--font-ui-smaller); + --codex-panel-toolbar-line-height: var(--line-height-tight); + --codex-panel-content-font: var(--font-text); + --codex-panel-content-font-size: calc(var(--font-text-size, 16px) * 0.9375); + --codex-panel-compact-line-height: var(--line-height-tight); + --codex-panel-surface: var(--background-primary); + --codex-panel-code-surface: var(--code-background, var(--background-secondary)); + --codex-panel-border-color: var(--background-modifier-border); + --codex-panel-border-muted-color: var(--background-modifier-border-hover); + --codex-panel-text-normal: var(--text-normal); + --codex-panel-text-muted: var(--text-muted); + --codex-panel-text-faint: var(--text-faint); + --codex-panel-color-accent: var(--interactive-accent); + --codex-panel-color-success: var(--text-success); + --codex-panel-color-warning: var(--text-warning); + --codex-panel-color-danger: var(--text-error); + --codex-panel-status-ring-faint: color-mix(in srgb, var(--codex-panel-text-faint) 12%, transparent); + --codex-panel-status-ring-success: color-mix(in srgb, var(--codex-panel-color-success) 12%, transparent); + --codex-panel-status-ring-warning: color-mix(in srgb, var(--codex-panel-color-warning) 14%, transparent); + --codex-panel-status-ring-danger: color-mix(in srgb, var(--codex-panel-color-danger) 14%, transparent); + --codex-panel-status-ring-accent: color-mix(in srgb, var(--codex-panel-color-accent) 14%, transparent); + --codex-panel-edge-padding-x: var(--size-4-3, 12px); + --codex-panel-toolbar-button-gap: var(--size-2-1, 2px); + --codex-panel-section-gap: var(--size-4-2, 8px); + --codex-panel-item-gap: var(--size-2-3, 6px); + --codex-panel-control-gap: var(--size-2-2, 4px); + --codex-panel-panel-gap: var(--size-2-1, 2px); + --codex-panel-toolbar-panel-row-gap: var(--codex-panel-control-gap); + --codex-panel-message-indent: calc(var(--codex-panel-section-gap) + var(--codex-panel-panel-gap)); + --codex-panel-section-label-color: var(--codex-panel-text-faint); + --codex-panel-section-label-size: var(--font-ui-smaller); + --codex-panel-section-label-weight: var(--font-semibold); + --codex-panel-section-label-line-height: var(--codex-panel-compact-line-height); + --codex-panel-section-label-padding: 0 var(--codex-panel-section-gap) var(--codex-panel-control-gap); + --codex-panel-section-label-block-padding: var(--codex-panel-item-gap) var(--codex-panel-section-gap) var(--codex-panel-panel-gap); + --codex-panel-role-label-color: var(--codex-panel-text-faint); + --codex-panel-role-label-size: var(--font-ui-smaller); + --codex-panel-role-label-weight: var(--font-semibold); + --codex-panel-item-title-color: var(--codex-panel-text-normal); + --codex-panel-item-title-size: var(--font-ui-small); + --codex-panel-item-title-weight: var(--font-semibold); + --codex-panel-secondary-label-size: var(--font-ui-smaller); + --codex-panel-secondary-label-weight: var(--font-medium); + --codex-panel-card-radius: var(--radius-s); + --codex-panel-control-radius: var(--clickable-icon-radius, var(--codex-panel-card-radius)); + --codex-panel-code-radius: var(--codex-panel-card-radius); + --codex-panel-rail-width: 2px; + --codex-panel-rail: var(--codex-panel-rail-width) solid var(--codex-panel-border-color); + --codex-panel-rail-transparent: var(--codex-panel-rail-width) solid transparent; + --codex-panel-border: var(--border-width, 1px) solid var(--codex-panel-border-color); + --codex-panel-divider: 1px solid var(--codex-panel-border-color); + --codex-panel-divider-muted: 1px solid var(--codex-panel-border-muted-color); +} diff --git a/src/styles/10-shared-ui.css b/src/styles/10-shared-ui.css new file mode 100644 index 00000000..c07a2afd --- /dev/null +++ b/src/styles/10-shared-ui.css @@ -0,0 +1,149 @@ +.codex-panel { + box-sizing: border-box; + container-type: inline-size; + display: flex; + flex-direction: column; + height: 100%; + min-width: 0; + min-height: 0; + padding: 0; + overflow: hidden; + color: var(--codex-panel-text-normal); +} + +.codex-panel-ui__toolbar-control, +.codex-panel-ui__icon-button, +.codex-panel-threads__icon-button { + box-sizing: border-box; + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + appearance: none; + border: 0; + background: transparent; + box-shadow: none; + color: var(--icon-color); + font: inherit; + line-height: var(--line-height-tight); + cursor: pointer; + user-select: none; +} + +.codex-panel-ui__toolbar-control:disabled, +.codex-panel-ui__icon-button:disabled, +.codex-panel-threads__icon-button:disabled { + cursor: default; + opacity: 0.45; +} + +.codex-panel-ui__toolbar-control { + --icon-size: var(--codex-panel-control-icon-size); + --icon-stroke: var(--icon-m-stroke-width, 1.75px); + min-width: var(--codex-panel-icon-button-inline-size); + width: auto; + height: auto; + padding: var(--codex-panel-control-gap) var(--codex-panel-item-gap); + border-radius: var(--codex-panel-control-radius); +} + +.codex-panel-ui__toolbar-control:hover, +.codex-panel-ui__toolbar-control:focus-visible, +.codex-panel-ui__toolbar-control:active { + background: var(--background-modifier-hover); + box-shadow: none; + color: var(--icon-color); +} + +.codex-panel-ui__toolbar-control:active svg { + color: var(--icon-color); + stroke: currentcolor; +} + +.codex-panel-ui__toolbar-control:where(:focus:not(:hover):not(:focus-visible)) { + background: transparent; + box-shadow: none; + color: var(--icon-color); +} + +.codex-panel-ui__icon-button { + --icon-size: var(--codex-panel-control-icon-size); + --icon-stroke: var(--icon-m-stroke-width, 1.75px); + min-width: var(--codex-panel-composer-control-size); + width: auto; + height: auto; + padding: var(--codex-panel-control-gap); + border-radius: var(--codex-panel-control-radius); +} + +.codex-panel-threads__icon-button { + --icon-size: var(--codex-panel-control-icon-size); + --icon-stroke: var(--icon-m-stroke-width, 1.75px); + padding: var(--codex-panel-control-gap); +} + +.codex-panel-threads__toolbar-button { + --icon-size: var(--codex-panel-control-icon-size); + --icon-stroke: var(--icon-m-stroke-width, 1.75px); + width: var(--codex-panel-size-clickable-icon); + height: var(--codex-panel-size-clickable-icon); + padding: var(--clickable-icon-padding, var(--codex-panel-control-gap)); + border-radius: var(--clickable-icon-radius, var(--codex-panel-control-radius)); +} + +.codex-panel-threads__row-button { + --icon-size: var(--codex-panel-size-icon-s); + --icon-stroke: var(--icon-s-stroke-width, 1.75px); +} + +.codex-panel-threads__toolbar-button:hover, +.codex-panel-threads__toolbar-button:focus-visible { + background: var(--background-modifier-hover); + box-shadow: none; + color: var(--icon-color); +} + +.codex-panel-threads__toolbar-button:focus:not(:hover):not(:focus-visible) { + background: transparent; + box-shadow: none; + color: var(--icon-color); +} + +.codex-panel-threads__row-button:hover, +.codex-panel-threads__row-button:focus, +.codex-panel-threads__row-button:focus-visible, +.codex-panel-threads__row-button:active { + background: transparent; + box-shadow: none; + color: var(--icon-color-active); +} + +.codex-panel-ui__toolbar-control svg, +.codex-panel-ui__icon-button svg, +.codex-panel-threads__icon-button svg { + width: var(--icon-size); + height: var(--icon-size); + stroke-width: var(--icon-stroke); +} + +.codex-panel-ui__text-input { + width: 100%; + overflow: hidden; + font-family: var(--codex-panel-content-font); + font-size: var(--codex-panel-content-font-size); + resize: none; +} + +.codex-panel-ui__action-stack { + height: 100%; + align-self: end; + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: var(--codex-panel-control-gap); +} + +.workspace-leaf-content[data-type="codex-panel-view"] .view-content.codex-panel { + padding: 0; + overflow: hidden; +} diff --git a/src/styles/11-shared-diff.css b/src/styles/11-shared-diff.css new file mode 100644 index 00000000..9acb9afe --- /dev/null +++ b/src/styles/11-shared-diff.css @@ -0,0 +1,56 @@ +.codex-panel-diff { + 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; +} + +.codex-panel-diff__line { + display: block; + border-left: 2px solid transparent; + padding-left: var(--codex-panel-item-gap); +} + +.codex-panel-diff__line--added { + border-left-color: var(--codex-panel-color-success); + color: var(--codex-panel-text-normal); +} + +.codex-panel-diff__line--removed { + border-left-color: var(--codex-panel-color-danger); + color: var(--codex-panel-text-normal); +} + +.codex-panel-diff__line--hunk { + color: var(--text-accent); +} + +.codex-panel-diff__line--file { + color: var(--codex-panel-text-normal); + font-weight: var(--font-semibold); +} + +.codex-panel-diff__line--context { + color: var(--codex-panel-text-muted); +} + +.codex-panel-diff__word { + border-radius: var(--codex-panel-control-gap); + padding: 0 var(--codex-panel-panel-gap); +} + +.codex-panel-diff__word--added { + background: color-mix(in srgb, var(--codex-panel-color-success) 20%, transparent); +} + +.codex-panel-diff__word--removed { + background: color-mix(in srgb, var(--codex-panel-color-danger) 20%, transparent); +} diff --git a/src/styles/12-shared-motion.css b/src/styles/12-shared-motion.css new file mode 100644 index 00000000..9e4ad974 --- /dev/null +++ b/src/styles/12-shared-motion.css @@ -0,0 +1,11 @@ +@keyframes codex-panel-reasoning-dot { + 0%, + 80%, + 100% { + opacity: 0.25; + } + + 40% { + opacity: 1; + } +} diff --git a/src/styles/20-chat-toolbar.css b/src/styles/20-chat-toolbar.css new file mode 100644 index 00000000..37cddee5 --- /dev/null +++ b/src/styles/20-chat-toolbar.css @@ -0,0 +1,200 @@ +.codex-panel__toolbar { + flex: 0 0 auto; + display: flex; + flex-direction: column; + padding: var(--codex-panel-section-gap); +} + +.codex-panel__toolbar-primary { + display: flex; + gap: var(--codex-panel-toolbar-button-gap); + align-items: center; + min-width: 0; +} + +.codex-panel__meter-compact-label, +.codex-panel__context-compact-label, +.codex-panel__runtime-model-value, +.codex-panel__limit-panel-label, +.codex-panel__limit-panel-value, +.codex-panel__limit-panel-reset, +.codex-panel__toolbar-panel-label, +.codex-panel__toolbar-panel-meta, +.codex-panel__suggestion-label, +.codex-panel__suggestion-detail { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.codex-panel__runtime-area { + flex: 0 1 auto; + min-width: 0; +} + +.codex-panel__auto-review-toggle { + flex: 0 0 auto; +} + +.codex-panel__runtime-strip { + display: inline-flex; + align-items: center; + gap: var(--codex-panel-toolbar-button-gap); + max-width: 100%; + min-width: 0; + white-space: nowrap; +} + +.codex-panel__runtime-icon { + flex: 0 0 auto; +} + +.codex-panel__auto-review-toggle.is-active, +.codex-panel__runtime-icon.is-active { + color: var(--icon-color-active); + background: var(--background-modifier-active-hover); +} + +.codex-panel__runtime-model { + display: inline-flex; + align-items: center; + flex: 0 1 auto; + width: fit-content; + max-width: 100%; + gap: var(--codex-panel-control-gap); + padding: var(--codex-panel-control-gap) var(--codex-panel-item-gap); + border: 0; + appearance: none; + background: transparent; + box-shadow: none; + color: var(--text-muted); + font: inherit; + font-size: var(--codex-panel-toolbar-text-size); + line-height: var(--codex-panel-toolbar-line-height); + text-align: left; + cursor: pointer; + user-select: none; +} + +.codex-panel__runtime-model:hover, +.codex-panel__runtime-model.is-active { + color: var(--text-normal); +} + +.codex-panel__runtime-model.is-active { + background: var(--background-modifier-hover); +} + +.codex-panel__runtime-model:hover { + background: var(--background-modifier-hover); +} + +.codex-panel__runtime-model-value { + flex: 0 1 auto; + min-width: 0; + color: var(--codex-panel-toolbar-text-color); +} + +.codex-panel__runtime-picker { + display: flex; + flex-direction: column; + gap: var(--codex-panel-toolbar-panel-row-gap); +} + +.codex-panel__toolbar-panel-item { + display: flex; + align-items: center; + gap: var(--size-4-2); + width: 100%; + min-width: 0; + min-height: var(--codex-panel-size-nav-item); + padding: var(--size-4-1) var(--size-4-2); + border: 0; + border-radius: var(--radius-s); + appearance: none; + background: transparent; + box-shadow: none; + color: var(--codex-panel-toolbar-text-color); + font: inherit; + font-size: var(--codex-panel-toolbar-text-size); + line-height: var(--codex-panel-toolbar-line-height); + text-align: left; + cursor: pointer; + transform: none; + user-select: none; +} + +.codex-panel__toolbar-panel-check { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: var(--codex-panel-size-icon-s); + width: var(--codex-panel-size-icon-s); + height: var(--codex-panel-size-icon-s); + color: var(--text-accent); +} + +.codex-panel__toolbar-panel-check svg { + width: var(--codex-panel-size-icon-s); + height: var(--codex-panel-size-icon-s); +} + +.codex-panel__toolbar-panel-label, +.codex-panel__toolbar-panel-meta { + min-width: 0; +} + +.codex-panel__toolbar-panel-label { + flex: 1 1 auto; + color: var(--codex-panel-toolbar-text-color); +} + +.codex-panel__toolbar-panel-meta { + flex: 0 1 auto; + color: var(--text-faint); + font-size: var(--codex-panel-toolbar-meta-size); +} + +.codex-panel__toolbar-panel-item:hover:not(:disabled):not(.is-disabled) { + color: var(--nav-item-color-hover, var(--text-normal)); + background: var(--background-modifier-hover); + box-shadow: none; + transform: none; +} + +.codex-panel__toolbar-panel-item:where(:hover, :focus, :focus-visible, :active):not(:disabled):not(.is-disabled) + .codex-panel__toolbar-panel-label { + color: var(--nav-item-color-hover, var(--text-normal)); +} + +.codex-panel__toolbar-panel-item:where(:hover, :focus, :focus-visible, :active):not(:disabled):not(.is-disabled) + .codex-panel__toolbar-panel-meta { + color: var(--nav-item-color-hover, var(--text-normal)); +} + +.codex-panel__toolbar-panel-item:focus, +.codex-panel__toolbar-panel-item:focus-visible, +.codex-panel__toolbar-panel-item:active { + background: transparent; + box-shadow: none; + outline: none; + transform: none; +} + +.codex-panel__toolbar-panel-item.is-disabled { + cursor: default; + opacity: 0.45; +} + +.codex-panel__toolbar-panel-item:disabled { + cursor: default; + opacity: 0.45; +} + +.codex-panel__runtime-picker-label { + padding: var(--size-4-1) var(--size-4-2) var(--size-2-1) calc(var(--codex-panel-size-icon-s) + var(--size-4-2) * 2); + color: var(--text-faint); + font-size: var(--codex-panel-toolbar-meta-size); + font-weight: var(--font-medium); +} diff --git a/src/styles/21-chat-status-diagnostics.css b/src/styles/21-chat-status-diagnostics.css new file mode 100644 index 00000000..1adf620b --- /dev/null +++ b/src/styles/21-chat-status-diagnostics.css @@ -0,0 +1,252 @@ +.codex-panel__status-dot { + cursor: pointer; + flex: 0 0 auto; + margin-left: auto; +} + +.codex-panel__status-dot::before { + content: ""; + width: var(--codex-panel-status-dot-size); + height: var(--codex-panel-status-dot-size); + border-radius: var(--codex-panel-radius-pill); + background: var(--codex-panel-text-faint); + box-shadow: 0 0 0 3px var(--codex-panel-status-ring-faint); +} + +.codex-panel__status-dot--ready::before { + background: var(--codex-panel-color-success); + box-shadow: 0 0 0 3px var(--codex-panel-status-ring-success); +} + +.codex-panel__status-dot--degraded::before { + background: var(--codex-panel-color-warning); + box-shadow: 0 0 0 3px var(--codex-panel-status-ring-warning); +} + +.codex-panel__status-dot--blocked::before { + background: var(--codex-panel-color-danger); + box-shadow: 0 0 0 3px var(--codex-panel-status-ring-danger); +} + +.codex-panel__status-dot--running::before { + background: var(--codex-panel-color-accent); + box-shadow: 0 0 0 3px var(--codex-panel-status-ring-accent); +} + +.codex-panel__meter-compact { + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--codex-panel-item-gap); + height: var(--codex-panel-icon-button-block-size); + min-width: 0; + max-width: calc(var(--codex-panel-icon-button-inline-size) * 3); + padding: 0 var(--codex-panel-panel-gap); + color: var(--codex-panel-toolbar-text-color); + font-size: var(--codex-panel-toolbar-text-size); + line-height: var(--codex-panel-toolbar-line-height); +} + +.codex-panel__context-compact { + margin-left: auto; +} + +.codex-panel__context-compact + .codex-panel__status-dot { + margin-left: 0; +} + +.codex-panel__meter-compact-bar { + flex: 0 0 calc(var(--codex-panel-icon-button-inline-size) + var(--size-4-1, 4px)); + height: var(--codex-panel-meter-bar-height); + overflow: hidden; + border-radius: var(--codex-panel-radius-pill); + background: var(--codex-panel-border-color); +} + +.codex-panel__meter-compact-fill { + display: block; + height: 100%; + border-radius: inherit; + background: var(--codex-panel-color-success); +} + +.codex-panel__meter-compact--warn .codex-panel__meter-compact-fill { + background: var(--codex-panel-color-warning); +} + +.codex-panel__meter-compact--danger .codex-panel__meter-compact-fill { + background: var(--codex-panel-color-danger); +} + +.codex-panel__toolbar-panel { + display: flex; + flex-direction: column; + gap: var(--codex-panel-panel-gap); + max-height: min(var(--codex-panel-size-toolbar-panel-max-height), 45vh); + overflow: auto; + margin-top: var(--codex-panel-item-gap); + padding: var(--codex-panel-item-gap) 0 0; + border-top: var(--codex-panel-divider); + background: transparent; +} + +.codex-panel__toolbar-panel--status { + max-height: min(var(--codex-panel-size-toolbar-status-panel-max-height), 55vh); + cursor: text; + user-select: text; +} + +.codex-panel__status-panel-items { + display: flex; + flex-direction: column; + gap: var(--codex-panel-toolbar-panel-row-gap); +} + +.codex-panel__limit-panel { + margin-top: var(--codex-panel-panel-gap); + padding-top: var(--codex-panel-item-gap); + border-top: var(--codex-panel-divider-muted); +} + +.codex-panel__limit-panel-title { + padding: var(--codex-panel-section-label-padding); + color: var(--codex-panel-section-label-color); + font-size: var(--codex-panel-section-label-size); + font-weight: var(--codex-panel-section-label-weight); + line-height: var(--codex-panel-section-label-line-height); +} + +.codex-panel__limit-panel-list { + display: flex; + flex-direction: column; + gap: var(--codex-panel-panel-gap); + cursor: text; + user-select: text; +} + +.codex-panel__limit-panel-row { + display: grid; + grid-template-columns: 2.5em 4ch minmax(64px, 1fr) 9.5em; + gap: var(--codex-panel-control-gap); + align-items: center; + padding: var(--codex-panel-control-gap) var(--codex-panel-section-gap); +} + +.codex-panel__limit-panel-label, +.codex-panel__limit-panel-value, +.codex-panel__limit-panel-reset { + min-width: 0; + color: var(--codex-panel-text-muted); + font-size: var(--font-ui-smaller); + line-height: var(--codex-panel-compact-line-height); + cursor: text; + user-select: text; +} + +.codex-panel__limit-panel-value { + text-align: right; + font-variant-numeric: tabular-nums; +} + +.codex-panel__limit-panel-reset { + color: var(--codex-panel-text-faint); +} + +.codex-panel__limit-panel-meter { + height: var(--codex-panel-meter-bar-height); + margin: 0 var(--codex-panel-panel-gap); + overflow: hidden; + border-radius: var(--codex-panel-radius-pill); + background: var(--codex-panel-border-color); +} + +.codex-panel__limit-panel-fill { + display: block; + height: 100%; + border-radius: inherit; + background: var(--codex-panel-color-success); +} + +.codex-panel__limit-panel-row--warn .codex-panel__limit-panel-fill { + background: var(--codex-panel-color-warning); +} + +.codex-panel__limit-panel-row--danger .codex-panel__limit-panel-fill { + background: var(--codex-panel-color-danger); +} + +.codex-panel__limit-panel-row--warn .codex-panel__limit-panel-value { + color: var(--codex-panel-color-warning); +} + +.codex-panel__limit-panel-row--danger .codex-panel__limit-panel-value { + color: var(--codex-panel-color-danger); +} + +.codex-panel__connection-diagnostics { + margin-top: var(--codex-panel-panel-gap); + padding-top: var(--codex-panel-item-gap); + border-top: var(--codex-panel-divider-muted); +} + +.codex-panel__connection-diagnostics-title { + padding: var(--codex-panel-section-label-padding); + color: var(--codex-panel-section-label-color); + font-size: var(--codex-panel-section-label-size); + font-weight: var(--codex-panel-section-label-weight); + line-height: var(--codex-panel-section-label-line-height); +} + +.codex-panel__connection-diagnostics-section { + padding: var(--codex-panel-section-label-block-padding); + color: var(--codex-panel-section-label-color); + font-size: var(--codex-panel-section-label-size); + font-weight: var(--codex-panel-section-label-weight); + line-height: var(--codex-panel-section-label-line-height); +} + +.codex-panel__connection-diagnostics-title + .codex-panel__connection-diagnostics-section { + padding-top: 0; +} + +.codex-panel__connection-diagnostics-list { + margin: 0; + cursor: text; + user-select: text; +} + +.codex-panel__connection-diagnostics-row { + display: grid; + grid-template-columns: minmax(0, 36%) minmax(0, 1fr); + gap: var(--codex-panel-section-gap); + padding: var(--codex-panel-control-gap) var(--codex-panel-section-gap); +} + +.codex-panel__connection-diagnostics-row dt, +.codex-panel__connection-diagnostics-row dd { + margin: 0; + min-width: 0; + font-size: var(--font-ui-smaller); + line-height: var(--line-height-tight); +} + +.codex-panel__connection-diagnostics-row dt { + color: var(--codex-panel-text-faint); + overflow-wrap: anywhere; +} + +.codex-panel__connection-diagnostics-row dd { + color: var(--codex-panel-text-muted); + overflow-wrap: anywhere; + cursor: text; + user-select: text; + white-space: pre-wrap; +} + +.codex-panel__connection-diagnostics-row--warning dd { + color: var(--codex-panel-color-warning); +} + +.codex-panel__connection-diagnostics-row--error dd { + color: var(--codex-panel-color-danger); +} diff --git a/src/styles/22-chat-thread-list.css b/src/styles/22-chat-thread-list.css new file mode 100644 index 00000000..95ea301a --- /dev/null +++ b/src/styles/22-chat-thread-list.css @@ -0,0 +1,141 @@ +.codex-panel__threads { + display: flex; + flex-direction: column; + gap: var(--codex-panel-toolbar-panel-row-gap); + min-width: 0; + max-width: 100%; + max-height: none; + overflow-x: hidden; + overflow-y: visible; +} + +.codex-panel__thread-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; + gap: var(--codex-panel-panel-gap); + align-items: center; + min-width: 0; + border-radius: var(--radius-s); +} + +.codex-panel__thread-row:hover, +.codex-panel__thread-row:focus-within { + background: var(--background-modifier-hover); +} + +.codex-panel__thread-row--renaming { + grid-template-columns: minmax(0, 1fr) auto; +} + +.codex-panel__thread-row--archive-confirming { + grid-template-columns: minmax(0, 1fr) auto auto; +} + +.codex-panel__thread:hover:not(:disabled):not(.is-disabled), +.codex-panel__thread.is-checked { + background: transparent; +} + +.codex-panel__thread-row:hover .codex-panel__thread, +.codex-panel__thread-row:focus-within .codex-panel__thread { + color: var(--nav-item-color-hover, var(--text-normal)); +} + +.codex-panel__thread-rename { + box-sizing: border-box; + min-height: var(--codex-panel-size-nav-item); + cursor: text; +} + +.codex-panel__thread-rename-field { + display: flex; + flex: 1 1 auto; + align-self: stretch; + align-items: center; + min-width: 0; + min-height: 0; + height: auto; + overflow: visible; + font-size: var(--codex-panel-toolbar-text-size); + line-height: var(--codex-panel-toolbar-line-height); +} + +.codex-panel__thread-rename-input.codex-panel__thread-rename-input { + position: relative; + appearance: none; + width: 100%; + min-width: 0; + min-height: 0; + height: auto; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + overflow: hidden; + color: var(--nav-item-color-active, var(--text-normal)); + background: transparent; + font: inherit; + letter-spacing: 0; + overflow-wrap: anywhere; + white-space: nowrap; + outline: none; + cursor: text; + user-select: text; +} + +.codex-panel__thread-rename-input.codex-panel__thread-rename-input:focus, +.codex-panel__thread-rename-input.codex-panel__thread-rename-input:focus-visible, +.codex-panel__thread-rename-input.codex-panel__thread-rename-input:hover, +.codex-panel__thread-rename-input.codex-panel__thread-rename-input:active { + border: 0; + box-shadow: none; + background: transparent; + outline: none; +} + +.codex-panel__thread { + min-height: var(--codex-panel-size-nav-item); + margin: 0; + box-shadow: none; +} + +.codex-panel__thread-action { + --icon-size: var(--codex-panel-size-icon-s); + --icon-stroke: var(--icon-s-stroke-width, 1.75px); + flex: 0 0 auto; + min-width: calc(var(--codex-panel-size-icon-s) + var(--codex-panel-control-gap) * 2); + padding: var(--codex-panel-control-gap); + visibility: hidden; + opacity: 0; +} + +.codex-panel__thread-row:hover .codex-panel__thread-action, +.codex-panel__thread-row:focus-within .codex-panel__thread-action, +.codex-panel__thread-action:focus-visible { + visibility: visible; + opacity: 1; +} + +.codex-panel__thread-action:disabled { + visibility: visible; + opacity: 0.4; +} + +.codex-panel__thread-row--archive-confirming .codex-panel__thread-action { + visibility: visible; + opacity: 1; +} + +.codex-panel__thread-action:hover, +.codex-panel__thread-action:focus, +.codex-panel__thread-action:focus-visible, +.codex-panel__thread-action:active { + background: transparent; + box-shadow: none; + color: var(--icon-color-active); +} + +.codex-panel__thread--empty { + color: var(--text-faint); + pointer-events: none; +} diff --git a/src/styles/30-chat-layout.css b/src/styles/30-chat-layout.css new file mode 100644 index 00000000..175acde2 --- /dev/null +++ b/src/styles/30-chat-layout.css @@ -0,0 +1,170 @@ +.codex-panel__body { + flex: 1 1 auto; + display: grid; + grid-template-rows: auto 1fr auto; + min-width: 0; + min-height: 0; +} + +.codex-panel__slot { + min-width: 0; +} + +.codex-panel__slot--messages { + min-height: 0; + overflow: hidden; +} + +.codex-panel__config { + min-width: 0; + max-width: 100%; + padding: var(--codex-panel-section-gap); + border-bottom: var(--codex-panel-divider); + color: var(--codex-panel-text-muted); + font-size: var(--font-ui-small); +} + +.codex-panel__toolbar-panel .codex-panel__config { + margin-top: var(--codex-panel-panel-gap); + padding: var(--codex-panel-item-gap) 0 0; + border-top: var(--codex-panel-divider-muted); + border-bottom: 0; +} + +.codex-panel__toolbar-panel .codex-panel__config-title { + padding: var(--codex-panel-section-label-padding); + color: var(--codex-panel-section-label-color); + font-size: var(--codex-panel-section-label-size); + font-weight: var(--codex-panel-section-label-weight); + line-height: var(--codex-panel-section-label-line-height); +} + +.codex-panel__toolbar-panel .codex-panel__config-list { + margin: 0; + overflow: visible; + border: 0; + border-radius: 0; + background: transparent; +} + +.codex-panel__toolbar-panel .codex-panel__config-section { + padding: var(--codex-panel-section-label-block-padding); + border-top: 0; + color: var(--codex-panel-section-label-color); + font-size: var(--codex-panel-section-label-size); + font-weight: var(--codex-panel-section-label-weight); + line-height: var(--codex-panel-section-label-line-height); +} + +.codex-panel__toolbar-panel .codex-panel__config-section:first-child { + padding-top: 0; +} + +.codex-panel__toolbar-panel .codex-panel__config-row { + display: grid; + grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); + gap: var(--codex-panel-section-gap); + padding: var(--codex-panel-control-gap) var(--codex-panel-section-gap); + border-top: 0; +} + +.codex-panel__toolbar-panel .codex-panel__config-row dt, +.codex-panel__toolbar-panel .codex-panel__config-row dd { + font-size: var(--font-ui-smaller); + line-height: var(--codex-panel-compact-line-height); + cursor: text; + user-select: text; +} + +.codex-panel__config-title, +.codex-panel__approval-details summary, +.codex-panel__output summary, +.codex-panel-diff-file summary, +.codex-panel__output-title { + color: var(--text-muted); + font-size: var(--font-ui-small); +} + +.codex-panel__approval-details summary:hover, +.codex-panel__output summary:hover, +.codex-panel-diff-file summary:hover { + color: var(--text-normal); +} + +.codex-panel__config-list { + margin: var(--codex-panel-section-gap) 0 0; + overflow: hidden; + border: var(--codex-panel-border); + border-radius: var(--codex-panel-card-radius); + background: var(--codex-panel-surface); +} + +.codex-panel__config-row { + display: grid; + grid-template-columns: minmax(82px, 34%) minmax(0, 1fr); + gap: var(--codex-panel-section-gap); + align-items: start; + padding: var(--codex-panel-control-gap) var(--codex-panel-section-gap); + border-top: var(--codex-panel-divider-muted); +} + +.codex-panel__config-row:first-child { + border-top: 0; +} + +.codex-panel__config-section { + padding: var(--codex-panel-section-label-block-padding); + border-top: var(--codex-panel-divider-muted); + color: var(--codex-panel-section-label-color); + font-size: var(--codex-panel-section-label-size); + font-weight: var(--codex-panel-section-label-weight); + line-height: var(--codex-panel-section-label-line-height); +} + +.codex-panel__config-section:first-child { + border-top: 0; +} + +.codex-panel__config-row dt, +.codex-panel__config-row dd { + margin: 0; + min-width: 0; + font-size: var(--font-ui-smaller); + line-height: var(--codex-panel-compact-line-height); +} + +.codex-panel__config-row dt { + color: var(--codex-panel-text-faint); +} + +.codex-panel__config-row dd { + color: var(--codex-panel-text-muted); + overflow-wrap: anywhere; + cursor: text; + user-select: text; + white-space: pre-wrap; +} + +.codex-panel__meta-grid { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + gap: var(--codex-panel-control-gap) var(--codex-panel-section-gap); + margin: var(--codex-panel-item-gap) 0; + font-size: var(--font-ui-smaller); + cursor: text; + user-select: text; +} + +.codex-panel__meta-grid dt { + color: var(--text-faint); + cursor: text; + user-select: text; +} + +.codex-panel__meta-grid dd { + margin: 0; + overflow-wrap: anywhere; + cursor: text; + user-select: text; + white-space: pre-wrap; +} diff --git a/src/styles/31-chat-messages.css b/src/styles/31-chat-messages.css new file mode 100644 index 00000000..2f837772 --- /dev/null +++ b/src/styles/31-chat-messages.css @@ -0,0 +1,578 @@ +.codex-panel__messages { + height: 100%; + min-height: 0; + overflow-y: auto; + overflow-anchor: none; + padding: var(--codex-panel-edge-padding-x) var(--codex-panel-edge-padding-x); + user-select: text; +} + +.codex-panel__history-bar { + display: flex; + justify-content: center; + margin-bottom: var(--codex-panel-section-gap); +} + +.codex-panel__message-block { + display: flow-root; +} + +.codex-panel__message { + margin-bottom: var(--codex-panel-edge-padding-x); + padding-left: var(--codex-panel-message-indent); + border-left: var(--codex-panel-rail-transparent); + white-space: pre-wrap; + overflow-wrap: anywhere; + user-select: text; +} + +.codex-panel__message-role { + display: flex; + align-items: center; + gap: var(--codex-panel-item-gap); + margin-bottom: var(--codex-panel-control-gap); + color: var(--codex-panel-role-label-color); + font-size: var(--codex-panel-role-label-size); + font-weight: var(--codex-panel-role-label-weight); +} + +.codex-panel__message-action { + --icon-size: var(--codex-panel-size-icon-xs); + --icon-stroke: var(--icon-xs-stroke-width, 2px); + opacity: 0; + transition: opacity 120ms ease-in-out; +} + +.codex-panel__message:hover .codex-panel__message-action, +.codex-panel__message-role--fork-open .codex-panel__message-action, +.codex-panel__message-action:focus-visible { + opacity: 1; +} + +.codex-panel__message--user { + border-left-color: var(--codex-panel-color-accent); +} + +.codex-panel__message--user .codex-panel__message-role { + color: var(--codex-panel-color-accent); +} + +.codex-panel__message--assistant { + border-left-color: var(--codex-panel-border-color); +} + +.codex-panel__message--system, +.codex-panel__message--tool { + color: var(--text-muted); + font-size: var(--font-ui-small); +} + +.codex-panel__message--system { + margin-bottom: var(--codex-panel-section-gap); + border-left-color: var(--codex-panel-border-color); + font-family: var(--font-interface); + line-height: var(--line-height-tight); +} + +.codex-panel__message--system .codex-panel__message-role { + font-size: var(--codex-panel-secondary-label-size); + font-weight: var(--codex-panel-secondary-label-weight); +} + +.codex-panel__message--system .codex-panel__message-content { + color: var(--text-muted); + font-family: var(--font-interface); + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); +} + +.codex-panel__message--system .codex-panel__output { + margin-top: var(--codex-panel-item-gap); +} + +.codex-panel__message--system .codex-panel__meta-grid { + grid-template-columns: minmax(max-content, 28%) minmax(0, 1fr); + margin-bottom: 0; +} + +.codex-panel__message--review-result { + border-left-color: var(--codex-panel-color-warning); +} + +.codex-panel__message--review-result .codex-panel__message-role { + color: var(--codex-panel-color-warning); +} + +.codex-panel__message--approval-result.codex-panel__execution--completed .codex-panel__message-role { + color: var(--codex-panel-color-success); +} + +.codex-panel__message--approval-result.codex-panel__execution--failed .codex-panel__message-role { + color: var(--codex-panel-color-danger); +} + +.codex-panel__message--user-input-result { + border-left-color: var(--codex-panel-color-accent); +} + +.codex-panel__message--user-input-result .codex-panel__message-role { + color: var(--codex-panel-color-accent); +} + +.codex-panel__activity-group { + margin: 0 0 var(--codex-panel-edge-padding-x); + padding-left: var(--codex-panel-message-indent); + border-left: var(--codex-panel-rail); + color: var(--text-muted); + font-size: var(--font-ui-small); +} + +.codex-panel__activity-group > summary { + cursor: pointer; + color: var(--text-muted); + font-size: var(--font-ui-small); +} + +.codex-panel__activity-group > summary:hover { + color: var(--text-normal); +} + +.codex-panel__activity-group[open] { + padding-bottom: var(--codex-panel-panel-gap); +} + +.codex-panel__activity-group > .codex-panel__message, +.codex-panel__activity-group > .codex-panel__work-message, +.codex-panel__activity-group > .codex-panel__reasoning { + margin-top: var(--codex-panel-section-gap); + margin-bottom: var(--codex-panel-section-gap); +} + +.codex-panel__message-content { + font-family: var(--codex-panel-content-font); + font-size: var(--codex-panel-content-font-size); + overflow-wrap: anywhere; + cursor: text; + user-select: text; +} + +.codex-panel__message-content.markdown-rendered { + white-space: normal; +} + +.codex-panel__message-content.markdown-rendered > :first-child { + margin-top: 0; +} + +.codex-panel__message-content.markdown-rendered > :last-child { + margin-bottom: 0; +} + +.codex-panel__message-content.markdown-rendered pre { + white-space: pre-wrap; +} + +.codex-panel__message-collapse { + position: relative; +} + +.codex-panel__message-content--collapsed { + position: relative; + max-height: min(var(--codex-panel-size-message-collapse-max-height), 45vh); + overflow: hidden; +} + +.codex-panel__message-content--collapsed::after { + content: ""; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: var(--codex-panel-size-message-collapse-fade-height); + background: linear-gradient(to bottom, transparent, var(--codex-panel-surface)); + pointer-events: none; +} + +.codex-panel__message-collapse-details { + position: relative; + z-index: 1; + margin-top: var(--codex-panel-item-gap); +} + +.codex-panel__message-collapse-details > summary { + cursor: pointer; + color: var(--text-muted); + font-size: var(--font-ui-smaller); +} + +.codex-panel__message-collapse-details > summary:hover { + color: var(--text-normal); +} + +.codex-panel__edited-files, +.codex-panel__referenced-thread, +.codex-panel__mentioned-files, +.codex-panel__auto-reviews { + margin-top: var(--codex-panel-item-gap); + color: var(--text-muted); + font-size: var(--font-ui-smaller); +} + +.codex-panel__referenced-thread-label { + display: inline-flex; + align-items: center; + gap: var(--codex-panel-control-gap); +} + +.codex-panel__edited-files { + display: block; +} + +.codex-panel__edited-files-details { + display: block; +} + +.codex-panel__mentioned-files-details { + display: block; +} + +.codex-panel__edited-files-summary { + display: inline-flex; + align-items: center; + gap: var(--codex-panel-control-gap); +} + +.codex-panel__open-turn-diff { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + gap: var(--codex-panel-panel-gap); + width: auto; + height: auto; + min-width: 0; + padding: 0; + --icon-size: var(--codex-panel-size-icon-xs); + color: var(--text-muted); + font-size: var(--font-ui-smaller); + line-height: var(--line-height-tight); +} + +.codex-panel__open-turn-diff:hover { + background: transparent; +} + +.codex-panel__open-turn-diff:focus-visible { + background: var(--background-modifier-hover); +} + +.codex-panel__edited-files-separator { + color: var(--text-faint); +} + +.codex-panel__reasoning { + margin: 0 0 var(--codex-panel-section-gap); + padding-left: var(--codex-panel-message-indent); + border-left: var(--codex-panel-rail); + color: var(--text-muted); + font-size: var(--font-ui-small); + white-space: pre-wrap; + overflow-wrap: anywhere; + cursor: text; + user-select: text; +} + +.codex-panel__reasoning-role { + margin-bottom: var(--codex-panel-panel-gap); + color: var(--codex-panel-role-label-color); + font-size: var(--codex-panel-role-label-size); + font-weight: var(--codex-panel-role-label-weight); +} + +.codex-panel__reasoning-content { + font-family: var(--codex-panel-content-font); + opacity: 0.92; +} + +.codex-panel__reasoning-dots span { + opacity: 0.35; +} + +.codex-panel__reasoning.is-active .codex-panel__reasoning-dots span { + animation: codex-panel-reasoning-dot 1.2s infinite ease-in-out; +} + +.codex-panel__reasoning.is-active .codex-panel__reasoning-dots span:where(:nth-child(2)) { + animation-delay: 0.18s; +} + +.codex-panel__reasoning.is-active .codex-panel__reasoning-dots span:where(:nth-child(3)) { + animation-delay: 0.36s; +} + +.codex-panel__wikilink { + cursor: pointer; +} + +.codex-panel__work-message { + 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 { + 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: pointer; +} + +.codex-panel__tool-result--plain .codex-panel__tool-result-header { + cursor: text; +} + +.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/32-chat-user-input.css new file mode 100644 index 00000000..0d27811c --- /dev/null +++ b/src/styles/32-chat-user-input.css @@ -0,0 +1,60 @@ +.codex-panel__user-input-question { + display: grid; + gap: var(--codex-panel-control-gap); + margin-top: var(--codex-panel-item-gap); +} + +.codex-panel__user-input-header { + color: var(--codex-panel-item-title-color); + font-size: var(--codex-panel-item-title-size); + font-weight: var(--codex-panel-item-title-weight); +} + +.codex-panel__user-input-prompt { + color: var(--text-muted); + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); +} + +.codex-panel__user-input-answer { + display: grid; + gap: var(--codex-panel-control-gap); + margin-top: calc(var(--codex-panel-section-gap) - var(--codex-panel-control-gap)); +} + +.codex-panel__user-input-option { + position: relative; + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + gap: var(--codex-panel-control-gap) var(--codex-panel-item-gap); + align-items: start; + padding: 0 var(--codex-panel-control-gap); + border-radius: var(--radius-s); + color: var(--text-muted); + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); + cursor: pointer; +} + +.codex-panel__user-input-radio { + grid-column: 1; + align-self: start; + margin: var(--codex-panel-panel-gap) 0 0; +} + +.codex-panel__user-input-option-description { + grid-column: 2; + color: var(--text-muted); + font-size: var(--font-ui-smaller); +} + +.codex-panel__user-input-text { + width: 100%; + min-height: var(--codex-panel-size-user-input-text-min-height); + min-width: 0; + font-size: var(--font-ui-small); +} + +.codex-panel__user-input-other-text { + grid-column: 2; +} diff --git a/src/styles/33-chat-composer.css b/src/styles/33-chat-composer.css new file mode 100644 index 00000000..a655b20c --- /dev/null +++ b/src/styles/33-chat-composer.css @@ -0,0 +1,78 @@ +.codex-panel__composer { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: var(--codex-panel-section-gap); + padding: var(--codex-panel-section-gap) var(--codex-panel-edge-padding-x) + calc(var(--codex-panel-section-gap) + var(--codex-panel-bottom-safe-area)); +} + +.codex-panel__composer-input { + min-height: var(--codex-panel-composer-min-height); + max-height: min(var(--codex-panel-size-composer-input-max-height), 40vh); +} + +.codex-panel__composer-action { + flex: 0 0 auto; +} + +.codex-panel__composer-action.is-interrupt { + color: var(--icon-color-focused); +} + +.codex-panel__composer-action.is-steer { + color: var(--icon-color-active); +} + +.codex-panel__composer-suggestions { + position: absolute; + right: var(--codex-panel-edge-padding-x); + bottom: calc(100% - var(--codex-panel-control-gap)); + left: var(--codex-panel-edge-padding-x); + z-index: var(--layer-popover, 30); + display: flex; + flex-direction: column; + width: auto; + max-height: min(var(--codex-panel-size-composer-suggestions-max-height), 36vh); + overflow-y: auto; + margin: 0; + border: var(--codex-panel-border); + border-radius: var(--codex-panel-card-radius); + background: var(--codex-panel-surface); + box-shadow: var(--shadow-s); +} + +.codex-panel__composer-suggestion.suggestion-item { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--codex-panel-panel-gap); + width: 100%; + line-height: var(--codex-panel-compact-line-height); + text-align: left; +} + +.codex-panel__composer-suggestion.suggestion-item.is-selected { + background: var(--background-modifier-hover); +} + +.codex-panel__suggestion-label, +.codex-panel__suggestion-detail { + display: block; + min-width: 0; +} + +.codex-panel__suggestion-label { + color: var(--codex-panel-item-title-color); + font-size: var(--codex-panel-item-title-size); + font-weight: var(--codex-panel-item-title-weight); +} + +.codex-panel__suggestion-detail { + color: var(--text-muted); + font-size: var(--font-ui-smaller); + line-height: var(--line-height-tight); +} + +.codex-panel__composer-suggestion.is-selected .codex-panel__suggestion-label { + color: var(--text-normal); +} diff --git a/src/styles/34-chat-turn-diff-view.css b/src/styles/34-chat-turn-diff-view.css new file mode 100644 index 00000000..abb8e7c1 --- /dev/null +++ b/src/styles/34-chat-turn-diff-view.css @@ -0,0 +1,52 @@ +.codex-panel-chat-turn-diff { + display: flex; + flex-direction: column; + gap: var(--codex-panel-edge-padding-x); + padding: calc(var(--codex-panel-section-gap) * 2); + height: 100%; + overflow: auto; +} + +.codex-panel-chat-turn-diff__header { + display: flex; + align-items: flex-start; + gap: var(--codex-panel-section-gap); +} + +.codex-panel-chat-turn-diff__title-block { + flex: 1 1 auto; + min-width: 0; +} + +.codex-panel-chat-turn-diff__title { + color: var(--text-normal); + font-size: var(--font-ui-medium); + font-weight: var(--font-semibold); + line-height: var(--line-height-tight); +} + +.codex-panel-chat-turn-diff__meta, +.codex-panel-chat-turn-diff__files, +.codex-panel-chat-turn-diff__empty { + color: var(--text-muted); + font-size: var(--font-ui-small); +} + +.codex-panel-chat-turn-diff__copy { + flex: 0 0 auto; +} + +.codex-panel-chat-turn-diff__files { + margin: 0; +} + +.codex-panel-chat-turn-diff__files ul { + margin-block: var(--codex-panel-control-gap) 0; +} + +.codex-panel-chat-turn-diff__diff.codex-panel-diff { + max-height: none; + margin: 0; + overflow: visible; + white-space: pre-wrap; +} diff --git a/src/styles/40-threads-view.css b/src/styles/40-threads-view.css new file mode 100644 index 00000000..c06407e2 --- /dev/null +++ b/src/styles/40-threads-view.css @@ -0,0 +1,217 @@ +.codex-panel-threads { + display: flex; + flex-direction: column; + height: 100%; + color: var(--codex-panel-text-normal); + font-family: var(--font-interface); +} + +.codex-panel-threads__row-title-line, +.codex-panel-threads__actions { + display: flex; + align-items: center; + gap: var(--codex-panel-item-gap); +} + +.codex-panel-threads__status, +.codex-panel-threads__empty { + color: var(--codex-panel-text-muted); + font-size: var(--font-ui-smaller); + line-height: var(--line-height-tight); +} + +.codex-panel-threads__empty { + box-sizing: border-box; + min-height: var(--codex-panel-size-nav-item); + padding: var(--nav-item-padding, var(--codex-panel-control-gap) var(--codex-panel-item-gap)); + color: var(--codex-panel-text-faint); + font-size: var(--font-ui-small); +} + +.codex-panel-threads__toolbar { + flex: 0 0 auto; +} + +.codex-panel-threads__list { + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-height: 0; + padding: var(--codex-panel-control-gap); + overflow: auto; +} + +.codex-panel-threads__row { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-items: center; + box-sizing: border-box; + width: 100%; + min-height: var(--codex-panel-size-nav-item); + padding: var(--nav-item-padding, var(--codex-panel-control-gap) var(--codex-panel-item-gap)); + border: 0; + border-radius: var(--nav-item-radius, var(--codex-panel-card-radius)); + background: transparent; + color: var(--nav-item-color, var(--text-muted)); + text-align: start; + cursor: pointer; + user-select: none; +} + +.codex-panel-threads__row::before { + position: absolute; + top: var(--codex-panel-control-gap); + bottom: var(--codex-panel-control-gap); + left: var(--codex-panel-section-gap); + width: var(--codex-panel-rail-width); + content: ""; +} + +.codex-panel-threads__row:hover, +.codex-panel-threads__row:focus-within { + background: var(--background-modifier-hover); +} + +.codex-panel-threads__row:hover .codex-panel-threads__row-title, +.codex-panel-threads__row:focus-within .codex-panel-threads__row-title { + color: var(--nav-item-color-hover, var(--text-normal)); +} + +.codex-panel-threads__row--needs-input, +.codex-panel-threads__row--approval { + --codex-panel-threads-gutter-color: color-mix(in srgb, var(--codex-panel-color-warning) 72%, transparent); +} + +.codex-panel-threads__row--running { + --codex-panel-threads-gutter-color: color-mix(in srgb, var(--codex-panel-color-accent) 68%, transparent); +} + +.codex-panel-threads__row--draft { + --codex-panel-threads-gutter-color: color-mix(in srgb, var(--codex-panel-color-accent) 36%, transparent); +} + +.codex-panel-threads__row--offline { + --codex-panel-threads-gutter-color: var(--text-muted); +} + +.codex-panel-threads__row--open { + --codex-panel-threads-gutter-color: var(--codex-panel-border-muted-color); +} + +.codex-panel-threads__row--needs-input::before, +.codex-panel-threads__row--approval::before, +.codex-panel-threads__row--running::before, +.codex-panel-threads__row--draft::before, +.codex-panel-threads__row--offline::before, +.codex-panel-threads__row--open::before { + background: var(--codex-panel-threads-gutter-color); +} + +.codex-panel-threads__row--renaming { + cursor: default; +} + +.codex-panel-threads__row--renaming .codex-panel-threads__icon-button { + padding: var(--codex-panel-panel-gap); +} + +.codex-panel-threads__row-title-line, +.codex-panel-threads__row-title { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.codex-panel-threads__row-title-line { + display: flex; + align-items: center; + box-sizing: border-box; + height: calc(var(--codex-panel-size-icon-s) + var(--codex-panel-panel-gap) * 2); + padding-right: calc(var(--codex-panel-threads-row-actions-width) + var(--codex-panel-item-gap)); +} + +.codex-panel-threads__row-title { + display: block; + font-size: var(--font-ui-small); + font-weight: var(--nav-item-weight, var(--font-normal)); + line-height: var(--line-height-tight); +} + +.codex-panel-threads__actions { + position: absolute; + top: 50%; + right: var(--codex-panel-item-gap); + transform: translateY(-50%); + flex-wrap: nowrap; + opacity: 0; +} + +.codex-panel-threads__row:hover .codex-panel-threads__actions, +.codex-panel-threads__row:focus-within .codex-panel-threads__actions { + opacity: 1; +} + +.codex-panel-threads__rename-form { + display: flex; + align-items: center; + box-sizing: border-box; + min-width: 0; + width: 100%; + min-height: calc(var(--codex-panel-size-icon-s) + var(--codex-panel-panel-gap) * 2); + padding-right: calc(var(--codex-panel-size-icon-s) + var(--codex-panel-panel-gap) * 2 + var(--codex-panel-item-gap)); +} + +.codex-panel-threads__rename-field { + display: flex; + flex: 1 1 auto; + align-items: center; + min-width: 0; + min-height: calc(var(--codex-panel-size-icon-s) + var(--codex-panel-panel-gap) * 2); + overflow: visible; + font-size: var(--font-ui-small); + font-weight: var(--nav-item-weight, var(--font-normal)); + line-height: var(--line-height-tight); +} + +.codex-panel-threads__rename-actions { + opacity: 1; +} + +.codex-panel-threads__row--archive-confirming .codex-panel-threads__actions { + opacity: 1; +} + +.codex-panel-threads__rename-input.codex-panel-threads__rename-input { + position: relative; + appearance: none; + flex: 1 1 auto; + min-width: 0; + min-height: 0; + height: auto; + margin: 0; + padding: 0; + border: 0; + box-shadow: none; + overflow: hidden; + color: var(--nav-item-color-active, var(--text-normal)); + background: transparent; + font: inherit; + letter-spacing: 0; + overflow-wrap: anywhere; + white-space: nowrap; + outline: none; + cursor: text; + user-select: text; +} + +.codex-panel-threads__rename-input.codex-panel-threads__rename-input:focus, +.codex-panel-threads__rename-input.codex-panel-threads__rename-input:focus-visible, +.codex-panel-threads__rename-input.codex-panel-threads__rename-input:hover, +.codex-panel-threads__rename-input.codex-panel-threads__rename-input:active { + border: 0; + box-shadow: none; + background: transparent; + outline: none; +} diff --git a/src/styles/50-selection-rewrite.css b/src/styles/50-selection-rewrite.css new file mode 100644 index 00000000..f5623ddf --- /dev/null +++ b/src/styles/50-selection-rewrite.css @@ -0,0 +1,126 @@ +.codex-panel-selection-rewrite { + position: fixed; + z-index: var(--layer-popover, 30); + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: var(--codex-panel-section-gap); + width: min(var(--codex-panel-size-selection-rewrite-width), calc(100vw - var(--codex-panel-size-selection-rewrite-panel-margin))); + max-height: min( + var(--codex-panel-size-selection-rewrite-max-height), + calc(100vh - var(--codex-panel-size-selection-rewrite-panel-margin)) + ); + padding: var(--codex-panel-section-gap); + overflow: auto; + border: var(--codex-panel-border); + border-radius: var(--radius-m); + background: var(--codex-panel-surface); + box-shadow: var(--shadow-s); + color: var(--codex-panel-text-normal); +} + +.codex-panel-selection-rewrite__prompt-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: var(--codex-panel-section-gap); + align-items: stretch; +} + +.codex-panel-selection-rewrite__instruction { + min-height: var(--codex-panel-composer-min-height); + max-height: min(var(--codex-panel-size-selection-rewrite-preview-max-height), 30vh); +} + +.codex-panel-selection-rewrite__result-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: var(--codex-panel-section-gap); + align-items: start; +} + +.codex-panel-selection-rewrite__result-row.is-hidden, +.codex-panel-selection-rewrite__diff:empty { + display: none; +} + +.codex-panel-selection-rewrite__icon-button.is-hidden { + display: none; +} + +.codex-panel-selection-rewrite__status { + color: var(--codex-panel-text-muted); + font-size: var(--font-ui-small); +} + +.codex-panel-selection-rewrite__status:empty { + display: none; +} + +.codex-panel-selection-rewrite__status.is-active { + color: var(--codex-panel-text-faint); +} + +.codex-panel-selection-rewrite__status-dots span { + opacity: 0.35; +} + +.codex-panel-selection-rewrite__status.is-active .codex-panel-selection-rewrite__status-dots span { + animation: codex-panel-reasoning-dot 1.2s infinite ease-in-out; +} + +.codex-panel-selection-rewrite__status.is-active .codex-panel-selection-rewrite__status-dots span:where(:nth-child(2)) { + animation-delay: 0.18s; +} + +.codex-panel-selection-rewrite__status.is-active .codex-panel-selection-rewrite__status-dots span:where(:nth-child(3)) { + animation-delay: 0.36s; +} + +.codex-panel-selection-rewrite__stream-preview { + box-sizing: border-box; + max-height: min(var(--codex-panel-size-selection-rewrite-preview-max-height), 28vh); + margin: 0; + padding: var(--codex-panel-item-gap) var(--codex-panel-section-gap); + overflow: auto; + border-left: var(--codex-panel-rail); + color: var(--codex-panel-text-muted); + font-family: var(--font-monospace); + font-size: var(--font-smaller); + white-space: pre-wrap; +} + +.codex-panel-selection-rewrite__stream-preview.is-hidden { + display: none; +} + +.codex-panel-selection-rewrite__diff-body { + box-sizing: border-box; + max-height: min(var(--codex-panel-size-selection-rewrite-diff-max-height), 38vh); + width: 100%; + margin: 0; + padding: var(--codex-panel-item-gap) var(--codex-panel-section-gap); + overflow: auto; + white-space: pre-wrap; +} + +.codex-panel-selection-rewrite__debug { + color: var(--codex-panel-text-muted); + font-size: var(--font-ui-small); +} + +.codex-panel-selection-rewrite__debug.is-hidden { + display: none; +} + +.codex-panel-selection-rewrite__debug pre { + max-height: var(--codex-panel-size-selection-rewrite-debug-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(--codex-panel-text-muted); + font-family: var(--font-monospace); + font-size: var(--font-smaller); + white-space: pre-wrap; +} diff --git a/src/styles/60-settings.css b/src/styles/60-settings.css new file mode 100644 index 00000000..5770551c --- /dev/null +++ b/src/styles/60-settings.css @@ -0,0 +1,109 @@ +.codex-panel-settings__section, +.codex-panel-settings__dynamic-section { + margin-top: var(--size-4-6); +} + +.codex-panel-settings__header { + display: grid; + grid-template-columns: minmax(0, max-content) auto; + align-items: start; + justify-content: start; + gap: var(--size-4-2); + min-height: var(--input-height); +} + +.codex-panel-settings__refresh-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--input-height); + height: var(--input-height); + padding: 0; +} + +.codex-panel-settings__section-heading.setting-item-heading, +.codex-panel-settings__dynamic-section-heading.setting-item-heading { + margin-bottom: var(--size-4-2); +} + +.codex-panel-settings__dynamic-section-status { + padding: 0 var(--size-4-4); +} + +.codex-panel-settings__section-status { + padding: 0 var(--size-4-4); +} + +.codex-panel-settings__section-intro, +.codex-panel-settings__dynamic-list-summary { + color: var(--text-muted); + font-size: var(--font-ui-small); + line-height: var(--line-height-normal); +} + +.codex-panel-settings__section-intro { + margin: 0; +} + +.codex-panel-settings__dynamic-list-summary { + padding: 0 var(--size-4-4); + margin: 0 0 var(--size-2-3); +} + +.codex-panel-settings__dynamic-list { + margin: var(--size-2-3) 0 0; + overflow: auto; + border: var(--codex-panel-border); + border-radius: var(--codex-panel-card-radius); + background: var(--codex-panel-surface); +} + +.codex-panel-settings__archived-list { + max-height: min(var(--codex-panel-size-settings-archived-list-max-height), 45vh); +} + +.codex-panel-settings__hook-list { + max-height: min(var(--codex-panel-size-settings-hook-list-max-height), 50vh); +} + +.codex-panel-settings__dynamic-row.setting-item { + margin: 0; + padding: var(--size-4-2) var(--size-4-3); + border: 0; + border-top: var(--codex-panel-border); + border-radius: 0; + background: transparent; +} + +.codex-panel-settings__dynamic-row.setting-item:first-child { + border-top: 0; +} + +.codex-panel-settings__dynamic-row .setting-item-info { + min-width: 0; +} + +.codex-panel-settings__dynamic-row .setting-item-name, +.codex-panel-settings__dynamic-row .setting-item-description { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.codex-panel-settings__hook-hash { + overflow: hidden; + padding-top: var(--size-2-1); + color: var(--text-faint); + font-family: var(--font-monospace); + font-size: var(--font-ui-smaller); + text-overflow: ellipsis; + white-space: nowrap; +} + +.codex-panel-settings__hook-warning { + color: var(--codex-panel-color-warning); +} + +.codex-panel-settings__hook-error { + color: var(--codex-panel-color-danger); +} diff --git a/src/styles/90-responsive-overrides.css b/src/styles/90-responsive-overrides.css new file mode 100644 index 00000000..96894fb0 --- /dev/null +++ b/src/styles/90-responsive-overrides.css @@ -0,0 +1,43 @@ +@container (max-width: 280px) { + .codex-panel__toolbar-primary { + flex-wrap: wrap; + } + + .codex-panel__runtime-strip { + gap: var(--codex-panel-panel-gap); + } + + .codex-panel__runtime-model { + padding: 0 var(--codex-panel-item-gap); + } + + .codex-panel__runtime-area { + order: 3; + flex: 1 1 100%; + } + + .codex-panel__meter-compact { + min-width: 0; + height: var(--codex-panel-control-icon-size); + padding-left: 0; + } + + .codex-panel__meter-compact-label { + max-width: calc(var(--codex-panel-icon-button-inline-size) * 2); + } + + .codex-panel__meter-compact-bar { + flex-basis: calc(var(--codex-panel-icon-button-inline-size) + calc(var(--codex-panel-section-gap) * 2)); + } + + .codex-panel__composer { + grid-template-columns: minmax(0, 1fr); + gap: var(--codex-panel-control-gap); + } + + .codex-panel__composer-actions { + height: auto; + flex-direction: row; + justify-content: flex-end; + } +} diff --git a/src/styles/manifest.json b/src/styles/manifest.json new file mode 100644 index 00000000..bb7e6c37 --- /dev/null +++ b/src/styles/manifest.json @@ -0,0 +1,18 @@ +[ + "00-tokens.css", + "10-shared-ui.css", + "11-shared-diff.css", + "12-shared-motion.css", + "20-chat-toolbar.css", + "21-chat-status-diagnostics.css", + "22-chat-thread-list.css", + "30-chat-layout.css", + "31-chat-messages.css", + "32-chat-user-input.css", + "33-chat-composer.css", + "34-chat-turn-diff-view.css", + "40-threads-view.css", + "50-selection-rewrite.css", + "60-settings.css", + "90-responsive-overrides.css" +]