From 55dedb47d65f39c865aa94df70948eb482937f40 Mon Sep 17 00:00:00 2001
From: murashit <murashit@proton.me>
Date: Fri, 5 Jun 2026 13:02:12 +0900
Subject: [PATCH] Wrap composer input and status in one frame

---
 src/features/chat/ui/composer.tsx | 46 ++++++++++++++++---------------
 src/styles/33-chat-composer.css   | 31 +++++++++++++++++++--
 tests/styles.test.ts              |  2 ++
 3 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/src/features/chat/ui/composer.tsx b/src/features/chat/ui/composer.tsx
index f70a5fb2..60d2b201 100644
--- a/src/features/chat/ui/composer.tsx
+++ b/src/features/chat/ui/composer.tsx
@@ -129,28 +129,30 @@ function ComposerShell({
 
   return (
     <div className="codex-panel__composer">
-      <textarea
-        ref={composerRef}
-        className="codex-panel-ui__text-input codex-panel__composer-input"
-        placeholder={sendMode.canInterrupt ? "Add steering message..." : normalPlaceholder}
-        role="combobox"
-        aria-autocomplete="list"
-        aria-expanded={suggestions.length > 0 ? "true" : "false"}
-        aria-controls={`${viewId}-composer-suggestions`}
-        aria-activedescendant={selectedSuggestionId}
-        value={draft}
-        onInput={(event) => {
-          if (syncComposerHeight(event.currentTarget)) callbacks.onComposerResize();
-          callbacks.onInput(event.currentTarget.value);
-        }}
-        onKeyUp={callbacks.onUpdateSuggestions}
-        onClick={callbacks.onUpdateSuggestions}
-        onSelect={callbacks.onUpdateSuggestions}
-        onKeyDown={(event) => {
-          callbacks.onKeydown(event);
-        }}
-      />
-      <ComposerMeta meta={meta} sendMode={sendMode} callbacks={callbacks} />
+      <div className="codex-panel__composer-frame">
+        <textarea
+          ref={composerRef}
+          className="codex-panel-ui__text-input codex-panel__composer-input"
+          placeholder={sendMode.canInterrupt ? "Add steering message..." : normalPlaceholder}
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded={suggestions.length > 0 ? "true" : "false"}
+          aria-controls={`${viewId}-composer-suggestions`}
+          aria-activedescendant={selectedSuggestionId}
+          value={draft}
+          onInput={(event) => {
+            if (syncComposerHeight(event.currentTarget)) callbacks.onComposerResize();
+            callbacks.onInput(event.currentTarget.value);
+          }}
+          onKeyUp={callbacks.onUpdateSuggestions}
+          onClick={callbacks.onUpdateSuggestions}
+          onSelect={callbacks.onUpdateSuggestions}
+          onKeyDown={(event) => {
+            callbacks.onKeydown(event);
+          }}
+        />
+        <ComposerMeta meta={meta} sendMode={sendMode} callbacks={callbacks} />
+      </div>
       <ComposerSuggestions
         containerRef={suggestionsRef}
         selectedRef={selectedSuggestionRef}
diff --git a/src/styles/33-chat-composer.css b/src/styles/33-chat-composer.css
index 55dc0040..7c44a8cf 100644
--- a/src/styles/33-chat-composer.css
+++ b/src/styles/33-chat-composer.css
@@ -1,15 +1,41 @@
 .codex-panel__composer {
   position: relative;
+  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-frame {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--codex-panel-control-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));
+  min-width: 0;
+  border: var(--input-border-width, var(--border-width, 1px)) solid var(--background-modifier-border);
+  border-radius: var(--input-radius, var(--radius-s));
+  background: var(--background-modifier-form-field);
+}
+
+.codex-panel__composer-frame:focus-within {
+  border-color: var(--background-modifier-border-focus);
+  box-shadow: 0 0 0 var(--input-border-width, var(--border-width, 1px)) var(--background-modifier-border-focus);
 }
 
 .codex-panel__composer-input {
   min-height: var(--codex-panel-composer-min-height);
   max-height: min(var(--codex-panel-size-composer-input-max-height), 40vh);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.codex-panel__composer-input.codex-panel__composer-input:hover,
+.codex-panel__composer-input.codex-panel__composer-input:focus,
+.codex-panel__composer-input.codex-panel__composer-input:focus-visible,
+.codex-panel__composer-input.codex-panel__composer-input:active {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
 }
 
 .codex-panel__composer-action {
@@ -35,6 +61,7 @@
   font-size: var(--font-ui-smaller);
   line-height: var(--line-height-tight);
   user-select: none;
+  padding: 0 var(--size-4-2) var(--size-4-1);
 }
 
 .codex-panel__composer-meta-status {
diff --git a/tests/styles.test.ts b/tests/styles.test.ts
index 5e6bb6b5..31c09aee 100644
--- a/tests/styles.test.ts
+++ b/tests/styles.test.ts
@@ -123,9 +123,11 @@ describe("chat toolbar CSS", () => {
   });
 
   it("aligns composer status text with the input text inset", () => {
+    const composerFrame = /\.codex-panel__composer-frame \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
     const composerMetaStatus = /\.codex-panel__composer-meta-status \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
     const composerMetaFatal = /\.codex-panel__composer-meta-fatal \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
 
+    expect(composerFrame).toContain("background: var(--background-modifier-form-field)");
     expect(composerMetaStatus).toContain("position: relative");
     expect(composerMetaStatus).toContain("padding-inline-start: calc(var(--size-4-1) / 2)");
     expect(composerMetaFatal).toContain("padding-inline-start: calc(var(--size-4-1) / 2)");