Effort picker: ghost ChipDropdown variant, bare labels

ChipDropdown gains a ghost trigger variant (bare toolbar pill, hover-only
surface, keeps the owned chevron since the label changes with the value)
for visual parity with neighboring Chip buttons; the effort picker uses
it with start alignment, natural menu width, and effort labels trimmed to
the bare levels.

Claude-Session: https://claude.ai/code/session_01CgaxNAaeD3taGdghbXn17w

Author: Sg312

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -685,9 +685,13 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
             <Tooltip.Content side='top'>Skills</Tooltip.Content>
           </Tooltip.Root>
           <ChipDropdown
+            variant='ghost'
             options={MOTHERSHIP_EFFORT_OPTIONS}
             value={effort}
             placeholder='Effort'
+            aria-label='Effort'
+            align='start'
+            matchTriggerWidth={false}
             onChange={(value) => setEffort(value as MothershipEffort)}
           />
         </div>

apps/sim/stores/mothership-effort/store.ts

@@ -5,11 +5,11 @@ import { devtools, persist } from 'zustand/middleware'
 export type MothershipEffort = 'low' | 'medium' | 'high' | 'xhigh' | 'max'
 
 export const MOTHERSHIP_EFFORT_OPTIONS: Array<{ value: MothershipEffort; label: string }> = [
-  { value: 'low', label: 'Low effort' },
-  { value: 'medium', label: 'Medium effort' },
-  { value: 'high', label: 'High effort' },
-  { value: 'xhigh', label: 'X-high effort' },
-  { value: 'max', label: 'Max effort' },
+  { value: 'low', label: 'Low' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'high', label: 'High' },
+  { value: 'xhigh', label: 'X-high' },
+  { value: 'max', label: 'Max' },
 ]
 
 interface MothershipEffortState {

packages/emcn/src/components/chip-dropdown/chip-dropdown.test.tsx

@@ -4,12 +4,12 @@
 import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, describe, expect, it } from 'vitest'
-import { ChipDropdown } from './chip-dropdown'
+import { ChipDropdown, type ChipDropdownProps } from './chip-dropdown'
 
 let root: Root | null = null
 let container: HTMLDivElement | null = null
 
-function mount(fullWidth: boolean): HTMLButtonElement {
+function mount(props: Pick<ChipDropdownProps, 'fullWidth' | 'variant'> = {}): HTMLButtonElement {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   container = document.createElement('div')
   document.body.appendChild(container)
@@ -19,8 +19,8 @@ function mount(fullWidth: boolean): HTMLButtonElement {
       <ChipDropdown
         value='workflow'
         options={[{ value: 'workflow', label: 'Workflow' }]}
-        fullWidth={fullWidth}
         aria-label='Principal type'
+        {...props}
       />
     )
   )
@@ -39,18 +39,35 @@ afterEach(() => {
 
 describe('ChipDropdown', () => {
   it('fills its container when fullWidth is enabled', () => {
-    expect(mount(true).className).toContain('w-full')
+    expect(mount({ fullWidth: true }).className).toContain('w-full')
   })
 
   it('keeps its intrinsic width by default', () => {
-    expect(mount(false).className).not.toContain('w-full')
+    expect(mount({ fullWidth: false }).className).not.toContain('w-full')
   })
 
   it('renders its text trigger through the fade-only overflow primitive', () => {
-    const label = mount(true).querySelector<HTMLElement>('[data-overflow-text]')
+    const label = mount({ fullWidth: true }).querySelector<HTMLElement>('[data-overflow-text]')
 
     expect(label?.textContent).toBe('Workflow')
     expect(label?.className).toContain('text-clip')
     expect(label?.className).not.toContain('truncate')
   })
+
+  it('renders the filled trigger with the border by default', () => {
+    const trigger = mount()
+    expect(trigger.className).toContain('border')
+    expect(trigger.className).toContain('bg-[var(--surface-5)]')
+  })
+
+  it('renders the ghost trigger as the bare pill — no border, no fill, icon-tinted label', () => {
+    const trigger = mount({ variant: 'ghost' })
+    expect(trigger.className).not.toContain('border')
+    expect(trigger.className).not.toContain('bg-[var(--surface-5)]')
+    expect(trigger.className).toContain('hover-hover:bg-[var(--surface-hover)]')
+
+    const label = trigger.querySelector<HTMLElement>('[data-overflow-text]')
+    expect(label?.className).toContain('text-[var(--text-icon)]')
+    expect(label?.className).not.toContain('text-[var(--text-body)]')
+  })
 })

packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx

@@ -47,7 +47,18 @@ interface ChipDropdownOption {
 /**
  * Trigger + menu chrome props shared by both selection modes.
  */
-interface ChipDropdownBaseProps extends VariantProps<typeof chipVariants> {
+interface ChipDropdownBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant'> {
+  /**
+   * Trigger chrome. `filled` (default) is the bordered field chip; `ghost` is
+   * the bare toolbar pill — no border, hover-only surface, label and chevron
+   * both `--text-icon` — for visual parity with neighboring icon-toolbar
+   * buttons (mirrors {@link ChipDatePicker}'s `ghost`).
+   * Unlike the date picker's, a ghost dropdown keeps the owned chevron: its
+   * label changes with the selected value, so the chevron is the one stable
+   * cue that this is a picker. Other `chipVariants` values pass through
+   * (e.g. `primary` for an inverse call-to-action trigger).
+   */
+  variant?: VariantProps<typeof chipVariants>['variant'] | 'ghost'
   /** Options to render in the menu. */
   options: ReadonlyArray<ChipDropdownOption>
   /** Shown in the trigger when nothing is selected. */
@@ -140,7 +151,9 @@ type ChipDropdownProps = ChipDropdownSingleProps | ChipDropdownMultiProps
  * `multiple` mode it toggles values, keeps the menu open across selections,
  * and optionally renders an "all" reset row and a search field.
  *
- * The trigger reuses `chipVariants` for visual parity with `Chip`. The label
+ * The trigger reuses `chipVariants` for visual parity with `Chip` — the
+ * default `filled` variant with the trigger border, or the bare toolbar pill
+ * via `variant='ghost'` (see the prop doc). The label
  * is `flex-1`, so the trailing chevron is pushed flush right. The chevron is
  * owned by the component and rendered at `size-[14px]` (matching the
  * workspace-header chevron) — there is intentionally no `rightIcon` prop. The
@@ -219,8 +232,9 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
       )
     }, [options, searchable, search])
 
+    const isGhost = variant === 'ghost'
     const isInverse = variant === 'primary' || variant === 'destructive'
-    const hasTriggerBorder = variant !== 'primary' && variant !== 'destructive'
+    const hasTriggerBorder = !isGhost && !isInverse
 
     let displayLabel: ReactNode
     if (isMultiple) {
@@ -252,8 +266,15 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
      * On intrinsic-width triggers (`inline-flex` with no parent constraint) the
      * container is sized to max-content, so `flex-grow` has no leftover space to
      * consume and the layout collapses to the natural `gap-2` between items.
+     *
+     * The ghost pill's label is `--text-icon` (matching its chevron), not
+     * `--text-body`: it sits in toolbars beside icon-only buttons, and a
+     * body-colored label would read louder than every control around it.
      */
-    const labelClass = cn('flex-1 text-sm', !isInverse && 'text-[var(--text-body)]')
+    const labelClass = cn(
+      'flex-1 text-sm',
+      !isInverse && (isGhost ? 'text-[var(--text-icon)]' : 'text-[var(--text-body)]')
+    )
 
     const triggerLabelClass = cn(
       labelClass,
@@ -325,7 +346,7 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
             aria-label={ariaLabel}
             aria-labelledby={ariaLabelledBy}
             className={cn(
-              chipVariants({ variant, active, fullWidth }),
+              chipVariants({ variant: isGhost ? 'default' : variant, active, fullWidth }),
               hasTriggerBorder && TRIGGER_BORDER_CLASS,
               className
             )}