@cardstack/boxel-cli 0.12.0 → 0.13.0-unstable.1

package/bundled-types/host-app/components/ai-assistant/llm-select.gts

@@ -20,6 +20,8 @@ export interface LLMOption {
 
 interface Signature {
   Args: {
+    /** see PillMenu's `anchorY` */
+    anchorY?: 'top' | 'bottom';
     selected: string;
     options: LLMOption[];
     onChange: (selectedLLM: string) => void;
@@ -37,6 +39,7 @@ export default class LLMSelect extends Component<Signature> {
   <template>
     <PillMenu
       class='llm-select'
+      @anchorY={{@anchorY}}
       @onExpand={{@onExpand}}
       @onCollapse={{@onCollapse}}
       ...attributes

package/bundled-types/host-app/components/ai-assistant/skill-menu/index.gts

@@ -32,6 +32,8 @@ const markdownDefRef = {
 interface Signature {
   Element: HTMLDivElement | HTMLButtonElement;
   Args: {
+    /** see PillMenu's `anchorY` */
+    anchorY?: 'top' | 'bottom';
     skills: RoomSkill[];
     onExpand?: () => void;
     onCollapse?: () => void;
@@ -46,6 +48,7 @@ export default class AiAssistantSkillMenu extends Component<Signature> {
   <template>
     <PillMenu
       class='skill-menu'
+      @anchorY={{@anchorY}}
       @onExpand={{fn this.setExpanded true}}
       @onCollapse={{fn this.setExpanded false}}
       title={{if this.isExpanded undefined this.headerText}}

package/bundled-types/host-app/components/matrix/room.gts

@@ -397,9 +397,12 @@ export default class Room extends Component<Signature> {
                 {{/if}}
 
                 <div class='chat-input-area__bottom-actions'>
+                  {{! the composer holds its bottom edge and grows upward, so
+                      a collapsing menu's fading copy is pinned to the bottom }}
                   {{#if this.displayLLMSelect}}
                     <LLMSelect
                       class='llm-select'
+                      @anchorY='bottom'
                       @selected={{@roomResource.activeLLM}}
                       @onChange={{perform @roomResource.activateLLMTask}}
                       @options={{this.llmsForSelectMenu}}
@@ -441,6 +444,7 @@ export default class Room extends Component<Signature> {
                   {{#if this.displaySkillMenu}}
                     <AiAssistantSkillMenu
                       class='skill-menu'
+                      @anchorY='bottom'
                       @skills={{this.sortedSkills}}
                       @onChooseCard={{perform this.attachSkillTask}}
                       @onChooseSkillMarkdown={{perform this.attachSkillTask}}
@@ -625,11 +629,17 @@ export default class Room extends Component<Signature> {
         flex-shrink: 1;
       }
 
-      .chat-input-area__bottom-actions:not(:has(.menu-content)) {
+      /* an open menu, not the fading copy of one that has closed: the row
+         takes its closed layout in the render that closes the menu */
+      .chat-input-area__bottom-actions:not(
+        :has(.menu-content:not([data-motion-memory] *))
+      ) {
         height: 40px;
       }
 
-      .chat-input-area__bottom-actions:has(.menu-content) {
+      .chat-input-area__bottom-actions:has(
+        .menu-content:not([data-motion-memory] *)
+      ) {
         padding: 0;
       }
 
@@ -674,7 +684,9 @@ export default class Room extends Component<Signature> {
 
       /* the bottom row answers its own width, so the context ring can step
          aside before it squeezes the model's name out */
-      .chat-input-area__bottom-actions:not(:has(.menu-content)) {
+      .chat-input-area__bottom-actions:not(
+        :has(.menu-content:not([data-motion-memory] *))
+      ) {
         container: composer / inline-size;
       }
       /* how full the model's context window is, beside the model it

package/bundled-types/host-app/components/operator-mode/dashboard/add-workspace.gts

@@ -67,12 +67,14 @@ export default class AddWorkspace extends Component<Signature> {
         justify-content: center;
         align-items: center;
         background-color: transparent;
-        box-shadow: inset 0 0 0 1px var(--boxel-light-10);
+        box-shadow: inset 0 0 0 1px var(--boxel-light-25);
         color: var(--boxel-light);
         transition: box-shadow var(--boxel-transition);
       }
-      .add-workspace:hover {
-        box-shadow: inset 0 0 0 1px var(--boxel-light-25);
+      @media (hover: hover) {
+        .add-workspace:hover {
+          box-shadow: inset 0 0 0 1px var(--boxel-light-50);
+        }
       }
       .add-workspace.is-selected,
       .add-workspace:focus-visible {

package/bundled-types/host-app/components/operator-mode/dashboard/archived-workspace.gts

@@ -90,14 +90,12 @@ export default class ArchivedWorkspace extends Component<Signature> {
         @appearance='outlined'
         @shape='pill'
         @size='s'
+        @icon={{ArchiveRestoreIcon}}
         @busy={{this.restoreTask.isRunning}}
         @busyLabel='Restoring'
         {{on 'click' (perform this.restoreTask)}}
         data-test-restore-workspace-btn={{@archivedRealm.url}}
-      >
-        <ArchiveRestoreIcon width='14' height='14' aria-hidden='true' />
-        Restore
-      </Button>
+      >Restore</Button>
     </div>
     <style scoped>
       .archived-row {
@@ -110,7 +108,7 @@ export default class ArchivedWorkspace extends Component<Signature> {
         padding: var(--boxel-sp-xs);
         border-radius: var(--dashboard-tile-radius);
         background-color: var(--dashboard-row-tint);
-        box-shadow: inset 0 0 0 1px var(--boxel-light-10);
+        box-shadow: inset 0 0 0 1px var(--boxel-light-25);
         color: var(--boxel-light);
       }
       .thumb {

package/bundled-types/host-app/components/operator-mode/dashboard/catalog-shelf.gts

@@ -315,7 +315,7 @@ export default class CatalogShelf extends Component<Signature> {
           @appearance='link'
           {{on 'click' this.openCatalog}}
           data-test-catalog-see-all
-        >See the whole catalog <span aria-hidden='true'>→</span></Button>
+        >See the full catalog <span aria-hidden='true'>→</span></Button>
       </div>
     {{else if this.isPending}}
       {{! The stories' metrics with nothing in them. }}
@@ -343,7 +343,7 @@ export default class CatalogShelf extends Component<Signature> {
           class='see-all is-pending'
           @tone='neutral'
           @appearance='link'
-        >See the whole catalog</Button>
+        >See the full catalog</Button>
       </div>
     {{/if}}
 
@@ -383,16 +383,33 @@ export default class CatalogShelf extends Component<Signature> {
         border-radius: var(--boxel-border-radius-2xl);
         background-color: var(--_story-paper);
         color: var(--foreground);
+        /* Edged like the workspace tiles, just outside the card so the edge
+           reads the same against the dashboard on every paper. */
         box-shadow:
-          0 0 0 1px var(--_story-edge),
+          0 0 0 1px var(--boxel-light-25),
           var(--shadow-md);
-        transition: transform var(--boxel-transition);
       }
-      @media (hover: hover) and (prefers-reduced-motion: no-preference) {
-        .story:hover {
-          transform: translateY(-0.125rem);
+      /* The hover ring stands 1px off the resting edge. */
+      .story::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        outline: 1px solid var(--boxel-light-50);
+        outline-offset: 1px;
+        opacity: 0;
+        transition: opacity var(--boxel-transition);
+        pointer-events: none;
+      }
+      @media (hover: hover) {
+        .story:not(.is-pending):hover::after {
+          opacity: 1;
         }
       }
+      /* Keeps the hover ring off the keyboard ring. */
+      .story:has(.story-open:focus-visible)::after {
+        opacity: 0;
+      }
       /* The story draws the keyboard ring around the whole card. */
       .story:has(.story-open:focus-visible) {
         box-shadow: var(--dashboard-ring), var(--shadow-md);

package/bundled-types/host-app/components/operator-mode/dashboard/workspace.gts

@@ -1037,14 +1037,19 @@ export default class Workspace extends Component<Signature> {
           var(--boxel-sp-xs) var(--boxel-sp-xs);
         border-radius: var(--dashboard-tile-radius);
         background-color: var(--dashboard-row-tint);
-        box-shadow: inset 0 0 0 1px var(--boxel-light-10);
-        transition: background-color var(--boxel-transition);
+        box-shadow: inset 0 0 0 1px var(--boxel-light-25);
+        transition:
+          background-color var(--boxel-transition),
+          box-shadow var(--boxel-transition);
       }
       .workspace.is-row:has(.host-menu) {
         --_workspace-controls: 3;
       }
-      .workspace.is-row:hover {
-        background-color: var(--_workspace-row-tint-hover);
+      @media (hover: hover) {
+        .workspace.is-row:hover {
+          background-color: var(--_workspace-row-tint-hover);
+          box-shadow: inset 0 0 0 1px var(--boxel-light-50);
+        }
       }
       /* Over the list's scrim, so a row the cursor rests on is never hidden
          under it; the Show more toggle, later in the page at the same level,

package/bundled-types/host-app/components/pill-menu/index.gts

@@ -3,10 +3,18 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
+import { motion, Presence, to, tween } from 'glimmer-motion';
+
 import { Button, Header } from '@cardstack/boxel-ui/components';
 
 import { DropdownArrowFilled } from '@cardstack/boxel-ui/icons';
 
+import {
+  DURATION,
+  EASE_IN,
+  motionEnabled,
+} from '../ai-assistant/motion/tokens';
+
 export type PillMenuItem = {
   cardId: string;
   realmURL: string | undefined;
@@ -16,6 +24,13 @@ export type PillMenuItem = {
 interface Signature {
   Element: HTMLDivElement | HTMLButtonElement;
   Args: {
+    /**
+     * The edge of the menu's containing block that holds still when the menu
+     * collapses: the menu's fading copy is pinned to it. `bottom` in a
+     * container that is anchored at its bottom and grows upward, such as the
+     * AI assistant's composer. Default `top`.
+     */
+    anchorY?: 'top' | 'bottom';
     title?: string;
     onExpand?: () => void;
     onCollapse?: () => void;
@@ -28,6 +43,22 @@ interface Signature {
   };
 }
 
+// The expanded menu is the one item of a <Presence>, so its exit can play
+// after `isExpanded` has already flipped. One stable array per state: the
+// presence diffs its items by identity.
+type MenuFace = { id: 'menu' };
+const MENU_PRESENT: MenuFace[] = [{ id: 'menu' }];
+const MENU_ABSENT: MenuFace[] = [];
+const faceKey = (face: MenuFace) => face.id;
+
+// Leaving eases in (ADR 007 §1.5). Opacity only: a fade cannot deform the
+// menu's text, and under reduced motion it is the short fade §1.5 asks for.
+const MENU_EXIT = to({ opacity: 0 });
+const MENU_EXIT_TRANSITION = tween({
+  duration: DURATION.exit,
+  ease: [...EASE_IN],
+});
+
 /**
  * A pill that expands into a menu and collapses back to the pill.
  *
@@ -36,19 +67,44 @@ interface Signature {
  * other face renders in the same pass. The expand animation is CSS on the
  * menu root, so no state tracks whether it is playing.
  *
- * The menu has no exit animation. Its header and content are the caller's
- * blocks, rendered from the caller's own state, which `@onCollapse` has
- * already moved on: a copy of the menu kept in the DOM while it fades would
- * re-render as the collapsed face, and would carry the caller's
- * `...attributes` and test hooks beside the live pill. A faithful exit needs
- * a snapshot the motion engine owns (ADR 007 §1.2), not a live block.
+ * The menu's exit belongs to the motion engine (ADR 007 §1.2). Its header and
+ * content are the caller's blocks, rendered from state that `@onCollapse` has
+ * already moved on, so the live menu cannot stay on screen to fade: it would
+ * re-render as the collapsed face, beside the pill, and stay focusable and
+ * clickable while it faded. The menu is the one item of a
+ * `<Presence @mode="snapshot">` instead: the live menu leaves with the render
+ * that collapses it, and the engine fades a static, inert copy of its last
+ * frame over the pill. With motion off nothing is copied.
  */
 export default class PillMenu extends Component<Signature> {
   <template>
-    {{#if this.isExpanded}}
+    {{#unless this.isExpanded}}
+      <Button
+        @kind='secondary'
+        @size='extra-small'
+        @pill={{true}}
+        {{on 'click' this.expandMenu}}
+        class='pill-menu-button'
+        data-test-pill-menu-button
+        data-test-pill-menu-collapsed
+        ...attributes
+      >
+        {{yield to='headerIcon'}}
+        {{yield to='headerDetail'}}
+        <DropdownArrowFilled class='minimized-arrow' width='8px' height='8px' />
+      </Button>
+    {{/unless}}
+    <Presence
+      @items={{this.menuFaces}}
+      @key={{faceKey}}
+      @mode='snapshot'
+      @anchorY={{@anchorY}}
+      as |_face h|
+    >
       <div
         class='pill-menu
           {{if (has-block "contentActions") "has-content-actions"}}'
+        {{motion presence=h exit=this.menuExit transition=MENU_EXIT_TRANSITION}}
         ...attributes
       >
         <Header class='menu-header' data-test-pill-menu-header>
@@ -90,22 +146,7 @@ export default class PillMenu extends Component<Signature> {
           </div>
         </div>
       </div>
-    {{else}}
-      <Button
-        @kind='secondary'
-        @size='extra-small'
-        @pill={{true}}
-        {{on 'click' this.expandMenu}}
-        class='pill-menu-button'
-        data-test-pill-menu-button
-        data-test-pill-menu-collapsed
-        ...attributes
-      >
-        {{yield to='headerIcon'}}
-        {{yield to='headerDetail'}}
-        <DropdownArrowFilled class='minimized-arrow' width='8px' height='8px' />
-      </Button>
-    {{/if}}
+    </Presence>
     <style scoped>
       .pill-menu {
         --boxel-header-gap: var(--boxel-sp-4xs);
@@ -336,6 +377,16 @@ export default class PillMenu extends Component<Signature> {
   </template>
 
   @tracked isExpanded = false;
+  private motion = motionEnabled();
+
+  private get menuFaces(): MenuFace[] {
+    return this.isExpanded ? MENU_PRESENT : MENU_ABSENT;
+  }
+
+  /** With motion off the menu has no exit to play, and nothing is copied. */
+  private get menuExit() {
+    return this.motion ? MENU_EXIT : undefined;
+  }
 
   @action expandMenu() {
     if (this.isExpanded) {

package/bundled-types/host-app/lib/key-shares.ts

@@ -144,7 +144,6 @@ export interface KeyShareUsage {
   }[];
   grants: {
     id: string;
-    host: string;
     destination: string;
     state: 'active' | 'rejected';
     rejectedAt: string | null;

package/bundled-types/host-app/tools/get-key-share-usage.ts

@@ -78,7 +78,6 @@ export default class GetKeyShareUsageTool extends HostBaseTool<
       grants: usage.grants.map(
         (grant) =>
           new KeyUsageGrantField({
-            host: grant.host,
             destination: grant.destination,
             state: grant.state,
             rejectedAt: grant.rejectedAt ?? undefined,