Merge pull request #2931 from kev1n77/fmy/ui-main

fix(ui): unify chat composer surfaces and compact tracks

Author: kev1n77

design-system/apps/design-lab/src/preview/FlowChatPreviewRegistry.tsx

@@ -133,15 +133,15 @@ type FlowChatPreviewDefinitionMap = {
 type PreviewProps = FlowChatPreviewRenderOptions;
 
 function ChatComposerPreview({ interactive, state }: PreviewProps) {
-  const [value, setValue] = useState("");
+  const [value, setValue] = useState(state === "expanded" ? "Review the attached project notes and explain how the implementation should behave across narrow and wide windows." : "");
   const expanded = state === "expanded";
   const queued = state === "queued";
 
   return (
     <div className="flow-chat-composer-preview">
       <ChatComposer
         busy={state === "busy"}
-        contextBar={(
+        contextBar={state === "default" ? undefined : (
           <div className="flow-chat-composer-preview__context">
             <span><Monitor aria-hidden="true" />This computer</span>
             <span>OpenBitFun</span>

design-system/packages/design-tokens/src/system.tokens.json

@@ -485,12 +485,12 @@
     "chatComposer": {
       "$type": "dimension",
       "actionIconSize": { "$value": "14px" },
-      "compactGap": { "$value": "9px" },
-      "compactHeight": { "$value": "45px" },
-      "compactPaddingBlock": { "$value": "9px" },
-      "compactPaddingInline": { "$value": "9px" },
-      "compactTrackHeight": { "$value": "25px" },
-      "controlHeight": { "$value": "25px" }
+      "compactGap": { "$value": "{control.composer.surfaceGap}" },
+      "compactHeight": { "$value": "42px" },
+      "compactPaddingBlock": { "$value": "{control.composer.surfacePadding}" },
+      "compactPaddingInline": { "$value": "{control.composer.surfacePadding}" },
+      "compactTrackHeight": { "$value": "24px" },
+      "controlHeight": { "$value": "24px" }
     },
     "flowChat": {
       "$description": "Shared FlowChat rhythm for product and package-owned conversation surfaces.",
@@ -585,6 +585,7 @@
       "iconSizeMd": { "$value": "14px" }
     },
     "composer": {
+      "contextBlur": { "$type": "dimension", "$value": "10px" },
       "$type": "dimension",
       "minBlockSize": { "$value": "120px" },
       "contextOffset": { "$value": "32px" },

design-system/packages/design-tokens/tests/contract.test.mjs

@@ -175,12 +175,12 @@ test("AskUser geometry preserves the answered question reference contract", () =
 });
 
 test("ChatComposer geometry preserves the scaled compact capsule contract", () => {
-  assert.equal(tokens["control.chatComposer.compactGap"], "9px");
-  assert.equal(tokens["control.chatComposer.compactHeight"], "45px");
-  assert.equal(tokens["control.chatComposer.compactPaddingBlock"], "9px");
-  assert.equal(tokens["control.chatComposer.compactPaddingInline"], "9px");
-  assert.equal(tokens["control.chatComposer.compactTrackHeight"], "25px");
-  assert.equal(tokens["control.chatComposer.controlHeight"], "25px");
+  assert.equal(tokens["control.chatComposer.compactGap"], "12px");
+  assert.equal(tokens["control.chatComposer.compactHeight"], "42px");
+  assert.equal(tokens["control.chatComposer.compactPaddingBlock"], "8px");
+  assert.equal(tokens["control.chatComposer.compactPaddingInline"], "8px");
+  assert.equal(tokens["control.chatComposer.compactTrackHeight"], "24px");
+  assert.equal(tokens["control.chatComposer.controlHeight"], "24px");
 });
 
 test("FlowChat rhythm keeps compact rows line-like and Turn boundaries distinct", async () => {

design-system/packages/theme-openbitfun/README.md

@@ -81,3 +81,5 @@ menu labels to secondary text (60%). Explicit imported action colors still win.
 Action cards own `color.actionCard.background`: the light entry surface is black at 3% opacity. `surface.subtle` is a transient navy tint and `field.groupBackground` belongs to form groups, so neither represents this persistent action surface. Other modes retain their neutral action surface. Product Appearance preserves explicit legacy neutral-surface overrides in root and chrome.
 
 Compact indicators own `color.numberBadge.background` and `color.keyHint.content` so reference light values (8% fill and 60% text) can coexist with existing dark/contrast values and explicit legacy Appearance overrides. The light Switch off track and resting scrollbar thumb use 10% black; KeyHint and Launcher resting fills use 8%. Long status labels keep content colors; StatusPill emphasis is opt-in.
+
+`color.composer.border` and `color.composer.contextBackground` are the shared editor-surface contract for Composer and ChatComposer. Reference light uses an 8% border and 3% context tint; persistent entry cards and form groups keep their separate owners. Legacy explicit field-border and subtle-surface overrides populate the new keys only when absent. Composer shadow uses a 12px CSS box-shadow blur (the Figma effect radius; its generated filter drop-shadow uses a 6px standard deviation).

design-system/packages/theme-openbitfun/src/dark.tokens.json

@@ -19,6 +19,10 @@
     }
   },
   "color": {
+    "composer": {
+      "border": { "$type": "color", "$value": "{color.field.border}" },
+      "contextBackground": { "$type": "color", "$value": "{color.surface.subtle}" }
+    },
     "numberBadge": {
       "background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
     },

design-system/packages/theme-openbitfun/src/high-contrast-dark.tokens.json

@@ -19,6 +19,10 @@
     }
   },
   "color": {
+    "composer": {
+      "border": { "$type": "color", "$value": "{color.field.border}" },
+      "contextBackground": { "$type": "color", "$value": "{color.surface.subtle}" }
+    },
     "keyHint": {
       "content": { "$type": "color", "$value": "{color.content.muted}" }
     },

design-system/packages/theme-openbitfun/src/high-contrast-light.tokens.json

@@ -19,6 +19,10 @@
     }
   },
   "color": {
+    "composer": {
+      "border": { "$type": "color", "$value": "{color.field.border}" },
+      "contextBackground": { "$type": "color", "$value": "{color.surface.subtle}" }
+    },
     "keyHint": {
       "content": { "$type": "color", "$value": "{color.content.muted}" }
     },

design-system/packages/theme-openbitfun/src/light.tokens.json

@@ -19,6 +19,10 @@
     }
   },
   "color": {
+    "composer": {
+      "border": { "$type": "color", "$value": "{color.field.border}" },
+      "contextBackground": { "$type": "color", "$value": "rgba(0, 0, 0, 0.03)" }
+    },
     "numberBadge": {
       "background": { "$type": "color", "$value": "{color.action.neutral.surfaceHover}" }
     },
@@ -261,7 +265,7 @@
     "lg": { "$value": "0 8px 16px rgba(16, 26, 39, 0.09)" },
     "xl": { "$value": "0 12px 24px rgba(16, 26, 39, 0.11)" },
     "raised": { "$value": "{shadow.sm}" },
-    "composer": { "$value": "0 2px 6px rgba(0, 0, 0, 0.08)" },
+    "composer": { "$value": "0 2px 12px rgba(0, 0, 0, 0.08)" },
     "menu": { "$value": "0 4px 20px rgba(0, 0, 0, 0.12)" },
     "overlay": { "$value": "0 4px 20px rgba(0, 0, 0, 0.12)" },
     "accentGlow": {

design-system/packages/theme-openbitfun/tests/theme-contract.test.mjs

@@ -328,7 +328,7 @@ test("default modes preserve the built-in Appearance anchor values", () => {
   assert.equal(themes.light["color.identity.globalSearch.openFiles"], "#9e54ff");
   assert.equal(themes.light["color.status.warning.surface"], "rgba(255, 140, 0, 0.1)");
   assert.equal(themes.light["shadow.base"], "0 4px 8px rgba(16, 26, 39, 0.07)");
-  assert.equal(themes.light["shadow.composer"], "0 2px 6px rgba(0, 0, 0, 0.08)");
+  assert.equal(themes.light["shadow.composer"], "0 2px 12px rgba(0, 0, 0, 0.08)");
   assert.equal(themes.light["shadow.menu"], "0 4px 20px rgba(0, 0, 0, 0.12)");
   assert.equal(themes.light["shadow.overlay"], "0 4px 20px rgba(0, 0, 0, 0.12)");
   assert.equal(themes.light["opacity.disabled"], 0.55);

design-system/packages/ui/README.md

@@ -429,3 +429,5 @@ Extra-large (`xl`) dialogs have an 800px maximum width and continue shrinking wi
 PageHeader `md` uses the settings title with a primary 15px description; `display` uses the welcome heading and medium 17px introduction with a 12px gap. ActionCard uses 12px padding, section-heading typography (15px semibold), and a primary 13px single-line action description. Its inset outline does not inflate the 62px medium minimum height; longer content keeps the independent sibling actions and OverflowText behavior.
 
 KeyHint uses 10px text on a 10px line and 2px block padding. StatusPill uses a 14px line with 2px block padding; opt into `emphasis` for short mode labels such as Ask, while ordinary status descriptions retain readable content colors. LauncherButton owns a 72px minimum width, 40px height, 10px side padding, 4px gap, 12px icon and 11px monospace text. Product shells may retain a deliberate compact greeting that expands into this geometry.
+
+Composer and ChatComposer share the 16px surface radius, 8px padding, 12px content gap, composer border, context tint, and composer shadow. Compact ChatComposer uses a 24px action track plus 8px padding on each side and two 1px borders (42px border-box height); expanded height follows editor content. The generic context shell has no duplicate outer border or surface inset. Queue and editor state remain owned by their existing slots and product adapters.