From 957912a20e5e7b272963223c036fff40171c7c94 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 18 Aug 2026 10:26:19 -0400
Subject: [PATCH 1/3] polish ai asst footer menus

keep pill-menu scroll shadows pinned by moving scrolling to an inner element

update test
---
 .../boxel-ui/src/components/button/index.gts  |  10 +-
 .../boxel-ui/src/components/button/usage.gts  |  30 ++++
 packages/boxel-ui/src/styles/theme.css        |   6 +-
 packages/boxel-ui/src/styles/variables.css    |   2 +
 .../ai-assistant/llm-mode-toggle.gts          |  45 +++---
 .../components/ai-assistant/llm-select.gts    |  16 +--
 .../ai-assistant/skill-menu/index.gts         |  40 ++----
 packages/host/app/components/matrix/room.gts  |  80 +++++------
 .../host/app/components/pill-menu/index.gts   | 129 +++++++++---------
 .../host/app/components/pill-menu/usage.gts   |   6 +-
 .../tests/acceptance/ai-assistant-test.gts    |   2 +-
 11 files changed, 193 insertions(+), 173 deletions(-)

diff --git a/packages/boxel-ui/src/components/button/index.gts b/packages/boxel-ui/src/components/button/index.gts
index 38a811e8ec7..2308e923a6f 100644
--- a/packages/boxel-ui/src/components/button/index.gts
+++ b/packages/boxel-ui/src/components/button/index.gts
@@ -59,6 +59,7 @@ interface Signature {
     kind?: BoxelButtonKind;
     loading?: boolean;
     models?: any;
+    pill?: boolean;
     query?: any;
     rectangular?: boolean;
     route?: any;
@@ -78,6 +79,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
       (concat 'kind-' (if @kind @kind 'default'))
       loading=@loading
       rectangular=@rectangular
+      pill=@pill
     )
     as |classes|
   }}
@@ -179,6 +181,12 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
       .boxel-button:not(.rectangular) {
         border-radius: var(--boxel-button-border-radius, 100px);
       }
+      .boxel-button:is(.pill) {
+        border-radius: var(
+          --boxel-button-border-radius,
+          var(--boxel-border-radius-pill)
+        );
+      }
       .boxel-button:not(:disabled):hover {
         background-color: color-mix(
           in oklab,
@@ -219,7 +227,7 @@ const ButtonComponent: TemplateOnlyComponent<Signature> = <template>
           --boxel-button-disabled-foreground,
           var(--boxel-button-text-color)
         );
-        opacity: var(--button-button-disabled-opacity, 0.5);
+        opacity: var(--boxel-button-disabled-opacity, 0.5);
         cursor: default;
       }
 
diff --git a/packages/boxel-ui/src/components/button/usage.gts b/packages/boxel-ui/src/components/button/usage.gts
index ab46e374771..0668932db38 100644
--- a/packages/boxel-ui/src/components/button/usage.gts
+++ b/packages/boxel-ui/src/components/button/usage.gts
@@ -25,6 +25,7 @@ export default class ButtonUsage extends Component {
   @tracked disabled?: boolean;
   @tracked loading?: boolean;
   @tracked rectangular?: boolean;
+  @tracked pill?: boolean;
 
   // for @as === 'anchor'
   @tracked href = '#';
@@ -63,6 +64,7 @@ export default class ButtonUsage extends Component {
             @href={{this.href}}
             @route={{this.route}}
             @rectangular={{this.rectangular}}
+            @pill={{this.pill}}
             {{on 'click' this.alert}}
           >
             Sample CTA
@@ -129,6 +131,14 @@ export default class ButtonUsage extends Component {
           @value={{this.rectangular}}
           @defaultValue={{false}}
         />
+        <Args.Bool
+          @name='pill'
+          @optional={{true}}
+          @description='Uses the pill border-radius (--boxel-border-radius-pill)'
+          @onInput={{fn (mut this.pill)}}
+          @value={{this.pill}}
+          @defaultValue={{false}}
+        />
         <Args.Bool
           @name='disabled'
           @optional={{true}}
@@ -252,6 +262,26 @@ export default class ButtonUsage extends Component {
         <Css.Basic @name='--boxel-button-min-width' @type='min-width' />
         <Css.Basic @name='--boxel-button-padding' @type='padding' />
         <Css.Basic @name='--boxel-button-box-shadow' @type='box-shadow' />
+        <Css.Basic
+          @name='--boxel-button-disabled-background'
+          @type='background-color'
+          @description='disabled state'
+        />
+        <Css.Basic
+          @name='--boxel-button-disabled-border'
+          @type='border'
+          @description='disabled state (css shorthand property)'
+        />
+        <Css.Basic
+          @name='--boxel-button-disabled-foreground'
+          @type='color'
+          @description='disabled state'
+        />
+        <Css.Basic
+          @name='--boxel-button-disabled-opacity'
+          @type='opacity'
+          @description='disabled state'
+        />
         <Css.Basic
           @name='--boxel-button-loading-icon-size'
           @type='width, height'
diff --git a/packages/boxel-ui/src/styles/theme.css b/packages/boxel-ui/src/styles/theme.css
index 2c8ccb26c5f..3d71a90994e 100644
--- a/packages/boxel-ui/src/styles/theme.css
+++ b/packages/boxel-ui/src/styles/theme.css
@@ -129,7 +129,7 @@
   --boxel-button-secondary-active-border: var(--foreground);
   --boxel-button-destructive-active-background: var(--boxel-danger-hover);
   --boxel-button-link-primary-foreground: var(--boxel-highlight-hover);
-  --button-button-disabled-opacity: 1;
+  --boxel-button-disabled-opacity: 1;
   --boxel-button-disabled-background: var(--boxel-border-color);
   --boxel-button-disabled-border: 1px solid var(--boxel-border-color);
   --boxel-button-disabled-foreground: var(--boxel-450);
@@ -177,7 +177,7 @@
   --boxel-button-secondary-active-border: initial;
   --boxel-button-link-primary-foreground: initial;
   --boxel-button-destructive-active-background: initial;
-  --button-button-disabled-opacity: initial;
+  --boxel-button-disabled-opacity: initial;
   --boxel-button-disabled-background: initial;
   --boxel-button-disabled-border: initial;
   --boxel-button-disabled-foreground: initial;
@@ -234,7 +234,7 @@
   --boxel-button-secondary-border: var(--border);
   --boxel-button-secondary-active-border: var(--foreground);
   --boxel-button-destructive-active-background: var(--boxel-danger-hover);
-  --button-button-disabled-opacity: 1;
+  --boxel-button-disabled-opacity: 1;
   --boxel-button-disabled-background: #444051;
   --boxel-button-disabled-foreground: #817c93;
   --boxel-button-disabled-border: 1px solid#444051;
diff --git a/packages/boxel-ui/src/styles/variables.css b/packages/boxel-ui/src/styles/variables.css
index f5a47a16196..292183352a8 100644
--- a/packages/boxel-ui/src/styles/variables.css
+++ b/packages/boxel-ui/src/styles/variables.css
@@ -115,6 +115,8 @@
   --boxel-border-radius-xl: calc(var(--boxel-border-radius) * 1.5); /* 15px */
   --boxel-border-radius-2xl: calc(var(--boxel-border-radius) * 2); /* 20px */
 
+  --boxel-border-radius-pill: 9999px; /* pill shape */
+
   /* animations */
   --boxel-infinite-spin-animation: boxel-spin 6000ms linear infinite;
 
diff --git a/packages/host/app/components/ai-assistant/llm-mode-toggle.gts b/packages/host/app/components/ai-assistant/llm-mode-toggle.gts
index af4dae651d6..f5d7cff5b9d 100644
--- a/packages/host/app/components/ai-assistant/llm-mode-toggle.gts
+++ b/packages/host/app/components/ai-assistant/llm-mode-toggle.gts
@@ -31,9 +31,9 @@ export default class LLMModeToggle extends Component<Signature> {
           <button
             type='button'
             class='llm-mode-option {{if (eq this.selected "ask") "selected"}}'
-            data-test-llm-mode-option='ask'
             disabled={{@disabled}}
             {{on 'click' (fn this.handleOptionClick 'ask')}}
+            data-test-llm-mode-option='ask'
           >
             Ask
           </button>
@@ -50,9 +50,9 @@ export default class LLMModeToggle extends Component<Signature> {
           <button
             type='button'
             class='llm-mode-option {{if (eq this.selected "act") "selected"}}'
-            data-test-llm-mode-option='act'
             disabled={{@disabled}}
             {{on 'click' (fn this.handleOptionClick 'act')}}
+            data-test-llm-mode-option='act'
           >
             Act
           </button>
@@ -66,40 +66,49 @@ export default class LLMModeToggle extends Component<Signature> {
     </div>
     <style scoped>
       .llm-mode-toggle {
+        --llm-mode-toggle-height: 1.875rem;
+        --llm-mode-toggle-inset: 0.125rem;
+        --llm-mode-option-width: 2.5rem;
+        --llm-mode-option-height: calc(
+          var(--llm-mode-toggle-height) - (2 * var(--llm-mode-toggle-inset))
+        );
+
         display: flex;
         align-items: center;
-        justify-content: center;
+        width: fit-content;
+        height: var(--llm-mode-toggle-height);
+        padding: var(--llm-mode-toggle-inset);
         background: var(--boxel-650);
-        border-radius: var(--boxel-pill-radius, 999px);
-        overflow: hidden;
-        border-width: 0;
-        box-shadow: none;
-        padding: 1.5px 2px 2px 2px;
+        border-radius: calc(var(--llm-mode-toggle-height) / 2);
       }
       .llm-mode-option {
-        flex: 1 1 0;
+        width: var(--llm-mode-option-width);
+        height: var(--llm-mode-option-height);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
         background: none;
         border: none;
-        border-radius: var(--boxel-border-radius);
-        padding-block: 2px;
+        border-radius: calc(var(--llm-mode-option-height) / 2);
         color: var(--boxel-light);
-        font: 700 var(--boxel-font-xs);
+        font-weight: 600;
+        font-size: var(--boxel-font-size-xs);
+        letter-spacing: var(--boxel-lsp-sm);
         cursor: pointer;
         transition:
-          background 0.15s,
-          color 0.15s;
+          background-color var(--boxel-transition),
+          color var(--boxel-transition);
       }
       .llm-mode-option.selected {
-        background: var(--boxel-teal);
+        background: var(--boxel-highlight);
         color: var(--boxel-dark);
-        height: 100%;
       }
       .llm-mode-option:disabled {
         opacity: 0.5;
-        cursor: not-allowed;
       }
       .llm-mode-option-tooltip {
-        max-width: 160px;
+        max-width: 10rem;
       }
     </style>
   </template>
diff --git a/packages/host/app/components/ai-assistant/llm-select.gts b/packages/host/app/components/ai-assistant/llm-select.gts
index de7e481425b..cf323bb045d 100644
--- a/packages/host/app/components/ai-assistant/llm-select.gts
+++ b/packages/host/app/components/ai-assistant/llm-select.gts
@@ -28,7 +28,7 @@ interface Signature {
     onCollapse?: () => void;
   };
   Blocks: {
-    footer: [];
+    menuActions: [];
   };
   Element: HTMLElement;
 }
@@ -93,9 +93,11 @@ export default class LLMSelect extends Component<Signature> {
               </button>
             </li>
           {{/each}}
-          {{yield to='footer'}}
         </ul>
       </:content>
+      <:contentActions>
+        {{yield to='menuActions'}}
+      </:contentActions>
     </PillMenu>
     <style scoped>
       .llm-select {
@@ -134,15 +136,11 @@ export default class LLMSelect extends Component<Signature> {
         padding: 0;
         margin: 0;
         display: grid;
-        gap: var(--boxel-sp-xxxs);
-        max-height: 300px;
-        overflow-y: auto;
-
-        scroll-timeline: --pill-menu-content-scroll-timeline;
+        gap: var(--boxel-sp-3xs);
       }
 
       .llm-option {
-        background: var(--boxel-light);
+        background-color: var(--boxel-light);
         border-radius: var(--boxel-border-radius);
         border: 1px solid var(--boxel-400);
       }
@@ -152,7 +150,7 @@ export default class LLMSelect extends Component<Signature> {
       }
 
       .llm-option.selected {
-        background-color: var(--boxel-teal);
+        background-color: var(--boxel-highlight);
       }
 
       .selected-icon {
diff --git a/packages/host/app/components/ai-assistant/skill-menu/index.gts b/packages/host/app/components/ai-assistant/skill-menu/index.gts
index 35815ead8ca..0ca82cf7c09 100644
--- a/packages/host/app/components/ai-assistant/skill-menu/index.gts
+++ b/packages/host/app/components/ai-assistant/skill-menu/index.gts
@@ -70,11 +70,12 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
           {{/each}}
         </ul>
       </:content>
-      <:footer>
+      <:contentActions>
         <Button
           class='attach-button'
-          @kind='primary'
+          @kind='secondary'
           @size='extra-small'
+          @pill={{true}}
           {{on 'click' this.attachSkillCard}}
           @disabled={{this.doAttachSkillCard.isRunning}}
           @loading={{this.isAttachingSkill}}
@@ -83,13 +84,14 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
           {{#if this.isAttachingSkill}}
             Adding Skill
           {{else}}
-            Choose a Skill to add
+            Choose a Skill to Add
           {{/if}}
         </Button>
         <Button
           class='attach-button'
-          @kind='primary'
+          @kind='secondary'
           @size='extra-small'
+          @pill={{true}}
           {{on 'click' this.attachSkillMarkdown}}
           @disabled={{this.doAttachSkillMarkdown.isRunning}}
           @loading={{this.isAttachingSkillMarkdown}}
@@ -98,10 +100,10 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
           {{#if this.isAttachingSkillMarkdown}}
             Adding Skill
           {{else}}
-            Choose a skill file to add
+            Choose a Skill File to Add
           {{/if}}
         </Button>
-      </:footer>
+      </:contentActions>
     </PillMenu>
     <style scoped>
       .skill-menu {
@@ -110,14 +112,10 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
       }
       .skill-list {
         display: grid;
-        gap: var(--boxel-sp-xxxs);
+        gap: var(--boxel-sp-3xs);
         list-style-type: none;
         padding: 0;
         margin: 0;
-        overflow-y: auto;
-        max-height: 300px;
-
-        scroll-timeline: --pill-menu-content-scroll-timeline;
       }
 
       .skill-list :deep(.card-content) {
@@ -126,24 +124,12 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
       }
       .attach-button {
         --boxel-button-font: 600 var(--boxel-font-xs);
-        --boxel-button-border: 1px solid var(--boxel-400);
-        --boxel-button-color: var(--boxel-dark);
         --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-sm);
-        --boxel-button-min-height: unset;
+        --boxel-button-disabled-background: none;
+        --boxel-button-disabled-opacity: 1;
 
-        gap: var(--boxel-sp-xs);
-        background: none;
-      }
-      .attach-button:hover:not(:disabled),
-      .attach-button:focus:not(:disabled) {
-        --icon-color: var(--boxel-600);
-        color: var(--boxel-600);
-        background: none;
-        box-shadow: none;
-      }
-      .attach-button:disabled {
-        --boxel-button-text-color: var(--boxel-300);
-        --boxel-button-border: 1px solid var(--boxel-300);
+        justify-content: flex-start;
+        text-wrap: balance;
       }
       .attach-button > :deep(svg > path) {
         stroke: none;
diff --git a/packages/host/app/components/matrix/room.gts b/packages/host/app/components/matrix/room.gts
index c364ae7fe38..fd71e1064a9 100644
--- a/packages/host/app/components/matrix/room.gts
+++ b/packages/host/app/components/matrix/room.gts
@@ -334,35 +334,35 @@ export default class Room extends Component<Signature> {
                     @onExpand={{fn this.setSelectedBottomAction 'llm-select'}}
                     @onCollapse={{fn this.setSelectedBottomAction undefined}}
                   >
-                    <:footer>
-                      <li class='llm-select-footer'>
-                        {{#if this.systemCardId}}
-                          <BoxelButton
-                            @kind='text-only'
-                            @size='extra-small'
-                            class='llm-select-footer-action'
-                            {{on 'click' this.goToSystemCard}}
-                            data-test-go-to-system-card
-                          >
-                            Go to current system card
-                          </BoxelButton>
-                        {{/if}}
-                        {{#unless this.isDefaultSystemCard}}
-                          <BoxelButton
-                            @kind='text-only'
-                            @size='extra-small'
-                            class='llm-select-footer-action'
-                            {{on
-                              'click'
-                              (perform this.restoreDefaultSystemCardTask)
-                            }}
-                            data-test-restore-default-system-card
-                          >
-                            Restore default system card
-                          </BoxelButton>
-                        {{/unless}}
-                      </li>
-                    </:footer>
+                    <:menuActions>
+                      {{#if this.systemCardId}}
+                        <BoxelButton
+                          @kind='secondary'
+                          @size='extra-small'
+                          @pill={{true}}
+                          class='llm-select-footer-action'
+                          {{on 'click' this.goToSystemCard}}
+                          data-test-go-to-system-card
+                        >
+                          Go to Current System Card
+                        </BoxelButton>
+                      {{/if}}
+                      {{#unless this.isDefaultSystemCard}}
+                        <BoxelButton
+                          @kind='secondary'
+                          @size='extra-small'
+                          @pill={{true}}
+                          class='llm-select-footer-action'
+                          {{on
+                            'click'
+                            (perform this.restoreDefaultSystemCardTask)
+                          }}
+                          data-test-restore-default-system-card
+                        >
+                          Restore Default System Card
+                        </BoxelButton>
+                      {{/unless}}
+                    </:menuActions>
                   </LLMSelect>
                 {{/if}}
                 {{#if this.displayLLMModeSelect}}
@@ -565,24 +565,14 @@ export default class Room extends Component<Signature> {
         width: 100%;
       }
 
-      .llm-select-footer {
-        display: flex;
-        flex-direction: column;
-        gap: var(--boxel-sp-xxxs);
-        border-top: 1px solid var(--boxel-200);
-        padding-top: var(--boxel-sp-xxxs);
-      }
-
       .llm-select-footer-action {
-        --boxel-button-padding: var(--boxel-sp-xxxs) var(--boxel-sp-sm);
-        --boxel-button-min-height: unset;
-        justify-content: flex-start;
-        font: 500 var(--boxel-font-xs);
-        color: var(--boxel-500);
-      }
+        --boxel-button-font: 600 var(--boxel-font-xs);
+        --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-sm);
+        --boxel-button-disabled-background: none;
+        --boxel-button-disabled-opacity: 1;
 
-      .llm-select-footer-action:hover {
-        color: var(--boxel-dark);
+        justify-content: flex-start;
+        text-wrap: balance;
       }
 
       .chat-input-area :deep(.minimized-arrow) {
diff --git a/packages/host/app/components/pill-menu/index.gts b/packages/host/app/components/pill-menu/index.gts
index 7f835547a6d..78c821346d8 100644
--- a/packages/host/app/components/pill-menu/index.gts
+++ b/packages/host/app/components/pill-menu/index.gts
@@ -3,7 +3,9 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import { Header } from '@cardstack/boxel-ui/components';
+import ChevronLeft from '@cardstack/boxel-icons/chevron-left';
+
+import { Button, Header } from '@cardstack/boxel-ui/components';
 
 import { DropdownArrowFilled } from '@cardstack/boxel-ui/icons';
 
@@ -24,7 +26,7 @@ interface Signature {
     headerIcon: [];
     headerDetail: [];
     content: [];
-    footer: [];
+    contentActions: [];
   };
 }
 
@@ -32,7 +34,8 @@ export default class PillMenu extends Component<Signature> {
   <template>
     {{#if this.isExpanded}}
       <div
-        class='pill-menu {{if (has-block "footer") "has-footer"}}'
+        class='pill-menu
+          {{if (has-block "contentActions") "has-content-actions"}}'
         ...attributes
       >
         <Header class='menu-header' data-test-pill-menu-header>
@@ -54,24 +57,25 @@ export default class PillMenu extends Component<Signature> {
               class='header-button'
               data-test-pill-menu-button
             >
-              <DropdownArrowFilled width='8px' height='8px' />
+              <ChevronLeft class='collapse-icon' width='16' height='16' />
             </button>
           </:detail>
         </Header>
-        {{#if (has-block 'content')}}
-          <div class='menu-content'>
+        <div class='menu-content'>
+          <div class='menu-content-scroll'>
             {{yield to='content'}}
-          </div>
-        {{/if}}
 
-        {{#if (has-block 'footer')}}
-          <footer class='menu-footer'>
-            {{yield to='footer'}}
-          </footer>
-        {{/if}}
+            {{#if (has-block 'contentActions')}}
+              <div class='menu-content-actions'>
+                {{yield to='contentActions'}}
+              </div>
+            {{/if}}
+          </div>
+        </div>
       </div>
     {{else}}
-      <button
+      <Button
+        @kind='secondary'
         {{on 'click' this.expandMenu}}
         class='pill-menu-button'
         data-test-pill-menu-button
@@ -80,7 +84,7 @@ export default class PillMenu extends Component<Signature> {
         {{yield to='headerIcon'}}
         {{yield to='headerDetail'}}
         <DropdownArrowFilled class='minimized-arrow' width='8px' height='8px' />
-      </button>
+      </Button>
     {{/if}}
     <style scoped>
       .pill-menu {
@@ -91,9 +95,10 @@ export default class PillMenu extends Component<Signature> {
         --button-outline: 2px;
         --boxel-header-min-height: fit-content;
         --pill-menu-gradient-height: 5px;
+        --pill-menu-content-max-height: 18.75rem;
 
         display: grid;
-        grid-template-rows: auto 1fr auto;
+        grid-template-rows: auto 1fr;
         max-height: 100%;
         min-height: max-content;
         width: var(--boxel-pill-menu-width, 100%);
@@ -104,31 +109,20 @@ export default class PillMenu extends Component<Signature> {
         letter-spacing: var(--boxel-lsp);
         box-shadow: var(--boxel-box-shadow);
         transition: width 0.2s ease-in;
-
-        timeline-scope: --pill-menu-content-scroll-timeline;
       }
       .pill-menu-button {
-        display: flex;
-        align-items: center;
-        font: 700 var(--boxel-font-xs);
-        gap: var(--boxel-sp-xxs);
-        padding: var(
-          --boxel-pill-menu-button-padding,
-          var(--pill-menu-spacing)
-        );
-        border: none;
-        white-space: nowrap;
-        background-color: transparent;
-        border: 1px solid transparent;
-        border-radius: var(--boxel-border-radius-xl);
+        --boxel-button-font: 600 var(--boxel-font-xs);
+        --boxel-button-secondary-border: transparent;
+        --boxel-button-secondary-active-border: var(--boxel-400);
+        --boxel-button-border-radius: var(--boxel-border-radius-pill);
+        padding-inline: var(--boxel-sp-sm);
+        gap: var(--boxel-sp-2xs);
         width: fit-content;
-      }
-      .pill-menu-button:hover {
-        border: 1px solid var(--boxel-400);
+        white-space: nowrap;
       }
       .menu-header {
         overflow: hidden;
-        padding: var(--chat-input-area-bottom-padding);
+        padding: var(--boxel-sp-sm);
         font: 700 var(--boxel-font-xs);
       }
       .menu-header :deep(.title) {
@@ -149,6 +143,9 @@ export default class PillMenu extends Component<Signature> {
       .header-button:focus:focus-visible {
         outline-color: var(--boxel-highlight);
       }
+      .collapse-icon {
+        color: var(--icon-color, var(--boxel-dark));
+      }
 
       .detail-close-button {
         border: none;
@@ -165,20 +162,36 @@ export default class PillMenu extends Component<Signature> {
         text-transform: uppercase;
       }
       .menu-content {
-        padding: 0 var(--chat-input-area-bottom-padding);
+        /* Non-scrolling wrapper: the edge shadows are its pseudo-elements and
+           it is their containing block, so they stay pinned to the visible
+           edges while .menu-content-scroll scrolls underneath them. */
+        position: relative;
+        display: grid;
+        min-height: 0;
+
+        timeline-scope: --pill-menu-content-scroll-timeline;
+      }
+
+      .menu-content-scroll {
+        padding: 0 var(--boxel-sp-sm);
         display: grid;
         gap: var(--pill-menu-spacing);
         overflow-y: auto;
         min-height: 0;
+        max-height: var(--pill-menu-content-max-height);
+
+        /* The scroll region and the timeline the edge shadows animate on are
+           the same element, so a consumer capping the height here gets the
+           shadows for free — no inner list should scroll on its own. */
+        scroll-timeline: --pill-menu-content-scroll-timeline;
       }
 
-      .pill-menu:not(:has(.menu-footer)) .menu-content {
-        padding-bottom: var(--chat-input-area-bottom-padding);
+      .pill-menu:not(:has(.menu-content-actions > *)) .menu-content-scroll {
+        padding-bottom: var(--boxel-sp-sm);
       }
 
       .menu-content::before,
-      .menu-content::after,
-      .menu-footer::before {
+      .menu-content::after {
         content: '';
         display: block;
         width: 100%;
@@ -190,6 +203,7 @@ export default class PillMenu extends Component<Signature> {
       }
 
       .menu-content::before {
+        top: 0;
         background: linear-gradient(
           to bottom,
           rgba(0, 0, 0, 0.25) 0%,
@@ -200,10 +214,6 @@ export default class PillMenu extends Component<Signature> {
         animation-timeline: --pill-menu-content-scroll-timeline;
       }
 
-      .pill-menu.has-footer .menu-content::after {
-        display: none;
-      }
-
       .menu-content::after {
         background: linear-gradient(
           to top,
@@ -214,32 +224,19 @@ export default class PillMenu extends Component<Signature> {
         animation: scroll-pill-menu-content reverse linear backwards;
         animation-timeline: --pill-menu-content-scroll-timeline;
 
-        bottom: var(--chat-input-area-bottom-padding);
+        bottom: 0;
       }
 
-      .menu-footer {
-        padding: var(--chat-input-area-bottom-padding);
+      .menu-content-actions {
+        border-top: 1px solid var(--boxel-200);
+        padding-block: var(--boxel-sp-xs);
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-3xs);
       }
 
-      .menu-footer::before {
-        background: linear-gradient(
-          to top,
-          rgba(0, 0, 0, 0.25) 0%,
-          transparent 100%
-        );
-
-        animation: scroll-pill-menu-content reverse linear backwards;
-        animation-timeline: --pill-menu-content-scroll-timeline;
-
-        transform: translateY(
-          calc(
-            -1 *
-              (
-                var(--pill-menu-gradient-height) +
-                  var(--chat-input-area-bottom-padding)
-              )
-          )
-        );
+      .menu-content-actions:not(:has(*)) {
+        display: none;
       }
 
       .pill-menu :deep(.menu-header .detail) {
diff --git a/packages/host/app/components/pill-menu/usage.gts b/packages/host/app/components/pill-menu/usage.gts
index e5a702370a0..4e0e5e7012e 100644
--- a/packages/host/app/components/pill-menu/usage.gts
+++ b/packages/host/app/components/pill-menu/usage.gts
@@ -42,9 +42,9 @@ export default class PillMenuUsage extends Component {
           <:content>
             This is the content of the pill menu.
           </:content>
-          <:footer>
-            This is the footer of the pill menu.
-          </:footer>
+          <:contentActions>
+            These are the content actions for the pill menu.
+          </:contentActions>
         </PillMenu>
       </:example>
       <:api as |Args|>
diff --git a/packages/host/tests/acceptance/ai-assistant-test.gts b/packages/host/tests/acceptance/ai-assistant-test.gts
index 96c9ec5f2b9..bdefa45f646 100644
--- a/packages/host/tests/acceptance/ai-assistant-test.gts
+++ b/packages/host/tests/acceptance/ai-assistant-test.gts
@@ -1023,7 +1023,7 @@ module('Acceptance | AI Assistant tests', function (hooks) {
       .exists('Go to system card action is visible');
     assert
       .dom('[data-test-go-to-system-card]')
-      .hasText('Go to current system card');
+      .hasText('Go to Current System Card');
 
     await click('[data-test-pill-menu-button]');
     await click('[data-test-close-ai-assistant]');

From 6458989f3eacaf4ea42570088ff4b3af5265665c Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Wed, 19 Aug 2026 13:14:16 -0400
Subject: [PATCH 2/3] add menu animation

---
 packages/host/app/components/matrix/room.gts  |   7 +
 .../host/app/components/pill-menu/index.gts   | 130 +++++++++++++++++-
 2 files changed, 133 insertions(+), 4 deletions(-)

diff --git a/packages/host/app/components/matrix/room.gts b/packages/host/app/components/matrix/room.gts
index fd71e1064a9..5ae3ca6a38c 100644
--- a/packages/host/app/components/matrix/room.gts
+++ b/packages/host/app/components/matrix/room.gts
@@ -560,6 +560,13 @@ export default class Room extends Component<Signature> {
         border-color: var(--boxel-dark);
       }
 
+      .llm-select {
+        /* The LLM menu opens noticeably taller than the skill menu; a longer
+           duration keeps the expanding edge moving at about the same speed. */
+        --pill-menu-expand-duration: 0.25s;
+        --pill-menu-collapse-duration: 0.19s;
+      }
+
       .llm-select :deep(.menu-content) {
         margin-right: calc(-2 * var(--boxel-sp-sm));
         width: 100%;
diff --git a/packages/host/app/components/pill-menu/index.gts b/packages/host/app/components/pill-menu/index.gts
index 78c821346d8..d5c4b7677df 100644
--- a/packages/host/app/components/pill-menu/index.gts
+++ b/packages/host/app/components/pill-menu/index.gts
@@ -1,14 +1,17 @@
+import { registerDestructor } from '@ember/destroyable';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
+import type Owner from '@ember/owner';
+import { buildWaiter, type Token } from '@ember/test-waiters';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import ChevronLeft from '@cardstack/boxel-icons/chevron-left';
-
 import { Button, Header } from '@cardstack/boxel-ui/components';
 
 import { DropdownArrowFilled } from '@cardstack/boxel-ui/icons';
 
+const waiter = buildWaiter('pill-menu:collapse-animation-waiter');
+
 export type PillMenuItem = {
   cardId: string;
   realmURL: string | undefined;
@@ -35,7 +38,11 @@ export default class PillMenu extends Component<Signature> {
     {{#if this.isExpanded}}
       <div
         class='pill-menu
-          {{if (has-block "contentActions") "has-content-actions"}}'
+          {{if (has-block "contentActions") "has-content-actions"}}
+          {{if this.isExpanding "is-expanding"}}
+          {{if this.isCollapsing "is-collapsing"}}'
+        {{on 'animationend' this.handleMenuAnimationEnd}}
+        {{on 'animationcancel' this.handleMenuAnimationEnd}}
         ...attributes
       >
         <Header class='menu-header' data-test-pill-menu-header>
@@ -57,7 +64,11 @@ export default class PillMenu extends Component<Signature> {
               class='header-button'
               data-test-pill-menu-button
             >
-              <ChevronLeft class='collapse-icon' width='16' height='16' />
+              <DropdownArrowFilled
+                class='collapse-icon'
+                width='8px'
+                height='8px'
+              />
             </button>
           </:detail>
         </Header>
@@ -110,6 +121,34 @@ export default class PillMenu extends Component<Signature> {
         box-shadow: var(--boxel-box-shadow);
         transition: width 0.2s ease-in;
       }
+      @media (prefers-reduced-motion: no-preference) {
+        .pill-menu {
+          /* The collapsed pill row's height, so the swap between button and
+             menu lands exactly where the height animation starts/ends. */
+          --pill-menu-collapsed-height: 2.5rem;
+
+          /* Lets the height keyframe interpolate to its auto endpoint. */
+          interpolate-size: allow-keywords;
+          overflow: hidden;
+          animation: pill-menu-expand var(--pill-menu-expand-duration, 0.2s)
+            ease-out;
+        }
+        .pill-menu.is-collapsing {
+          /* A separately named animation: only an animation-name change
+             restarts the animation and re-arms its animationend event. */
+          animation: pill-menu-collapse
+            var(--pill-menu-collapse-duration, 0.15s) ease-in forwards;
+        }
+
+        /* While the menu height is animating, the squeezed content region
+           would briefly become scrollable and flash a scrollbar; suppress it
+           for the duration. hidden (not clip) keeps the region
+           programmatically scrollable for the scroll-into-view modifier. */
+        .pill-menu.is-expanding .menu-content-scroll,
+        .pill-menu.is-collapsing .menu-content-scroll {
+          overflow-y: hidden;
+        }
+      }
       .pill-menu-button {
         --boxel-button-font: 600 var(--boxel-font-xs);
         --boxel-button-secondary-border: transparent;
@@ -250,6 +289,30 @@ export default class PillMenu extends Component<Signature> {
         flex-shrink: 0;
       }
 
+      @keyframes pill-menu-expand {
+        /* min-height is pinned in both keyframes so the base
+           min-height: max-content doesn't hold the menu open mid-animation. */
+        from {
+          height: var(--pill-menu-collapsed-height);
+          min-height: 0;
+        }
+        to {
+          height: auto;
+          min-height: 0;
+        }
+      }
+
+      @keyframes pill-menu-collapse {
+        from {
+          height: auto;
+          min-height: 0;
+        }
+        to {
+          height: var(--pill-menu-collapsed-height);
+          min-height: 0;
+        }
+      }
+
       @keyframes scroll-pill-menu-content {
         0% {
           opacity: 0;
@@ -265,14 +328,73 @@ export default class PillMenu extends Component<Signature> {
   </template>
 
   @tracked isExpanded = false;
+  @tracked private isExpanding = false;
+  @tracked private isCollapsing = false;
+  private collapseWaiterToken: Token | undefined;
+
+  constructor(owner: Owner, args: Signature['Args']) {
+    super(owner, args);
+    registerDestructor(this, () => this.releaseCollapseWaiter());
+  }
+
+  private get prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  }
 
   @action expandMenu() {
+    this.isCollapsing = false;
+    this.releaseCollapseWaiter();
     this.isExpanded = true;
+    // Mirrors the expand animation's lifetime; with reduced motion no
+    // animation (and no animationend to clear this) runs.
+    this.isExpanding = !this.prefersReducedMotion;
     this.args.onExpand?.();
   }
 
   @action collapseMenu() {
+    if (this.isCollapsing) {
+      return;
+    }
+    if (this.prefersReducedMotion) {
+      // No exit animation will run, so there is no animationend to wait for.
+      this.finishCollapse();
+      return;
+    }
+    this.isCollapsing = true;
+    this.collapseWaiterToken = waiter.beginAsync();
+  }
+
+  // The menu stays in the DOM while the collapse animation plays; removal
+  // happens here, once that animation on the menu root itself completes.
+  // Animation names are matched by prefix: scoped CSS appends a suffix to
+  // keyframe names.
+  @action private handleMenuAnimationEnd(event: AnimationEvent) {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if (event.animationName.startsWith('pill-menu-expand')) {
+      this.isExpanding = false;
+      return;
+    }
+    if (
+      this.isCollapsing &&
+      event.animationName.startsWith('pill-menu-collapse')
+    ) {
+      this.finishCollapse();
+    }
+  }
+
+  private finishCollapse() {
+    this.isCollapsing = false;
+    this.releaseCollapseWaiter();
     this.isExpanded = false;
     this.args.onCollapse?.();
   }
+
+  private releaseCollapseWaiter() {
+    if (this.collapseWaiterToken) {
+      waiter.endAsync(this.collapseWaiterToken);
+      this.collapseWaiterToken = undefined;
+    }
+  }
 }

From a65328187e449cf2f7dbabd4477347f8e4ecba86 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Wed, 19 Aug 2026 13:14:37 -0400
Subject: [PATCH 3/3] add press-scale transition on menu triggers

---
 packages/host/app/components/pill-menu/index.gts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/host/app/components/pill-menu/index.gts b/packages/host/app/components/pill-menu/index.gts
index d5c4b7677df..da4bb99fcad 100644
--- a/packages/host/app/components/pill-menu/index.gts
+++ b/packages/host/app/components/pill-menu/index.gts
@@ -154,11 +154,16 @@ export default class PillMenu extends Component<Signature> {
         --boxel-button-secondary-border: transparent;
         --boxel-button-secondary-active-border: var(--boxel-400);
         --boxel-button-border-radius: var(--boxel-border-radius-pill);
+        --boxel-button-transition:
+          var(--boxel-transition-properties), scale 0.15s ease-out;
         padding-inline: var(--boxel-sp-sm);
         gap: var(--boxel-sp-2xs);
         width: fit-content;
         white-space: nowrap;
       }
+      .pill-menu-button:not(:disabled):active {
+        scale: 0.96;
+      }
       .menu-header {
         overflow: hidden;
         padding: var(--boxel-sp-sm);
@@ -368,8 +373,11 @@ export default class PillMenu extends Component<Signature> {
   // happens here, once that animation on the menu root itself completes.
   // Animation names are matched by prefix: scoped CSS appends a suffix to
   // keyframe names.
-  @action private handleMenuAnimationEnd(event: AnimationEvent) {
-    if (event.target !== event.currentTarget) {
+  @action private handleMenuAnimationEnd(event: Event) {
+    if (
+      !(event instanceof AnimationEvent) ||
+      event.target !== event.currentTarget
+    ) {
       return;
     }
     if (event.animationName.startsWith('pill-menu-expand')) {