@cardstack/boxel-cli 0.11.0-unstable.2 → 0.11.0-unstable.3

package/bundled-realms/pretui/components/recommendation.gts

@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import { guidFor } from '@ember/object/internals';
 import { Collapse } from '../internal/agentic-chat';
+import CheckIcon from '@cardstack/boxel-icons/check';
 import { Button } from './button';
 import { Meter } from './meter';
 
@@ -38,6 +39,9 @@ export interface RecommendationOption {
 
 export interface RecommendationSignature {
   Args: {
+    /** 'card' (default): its own raised surface. 'plain': no surface of its
+     * own, for a place that already frames it, such as a tool row */
+    surface?: 'card' | 'plain';
     /** what is being decided */
     question: string;
     /** the options, best first */
@@ -76,7 +80,9 @@ export class Recommendation extends Component<RecommendationSignature> {
     return this.args.selectedKey ?? this.innerKey ?? this.options[0]?.key ?? '';
   }
   get active(): RecommendationOption | undefined {
-    return this.options.find((o) => o.key === this.activeKey) ?? this.options[0];
+    return (
+      this.options.find((o) => o.key === this.activeKey) ?? this.options[0]
+    );
   }
   get others(): RecommendationOption[] {
     return this.options.filter((o) => o.key !== this.activeKey);
@@ -113,7 +119,7 @@ export class Recommendation extends Component<RecommendationSignature> {
 
   accept = () => {
     let option = this.active;
-    if (!option) {
+    if (!option || this.accepted) {
       return;
     }
     this.innerAccepted = true;
@@ -125,6 +131,7 @@ export class Recommendation extends Component<RecommendationSignature> {
   <template>
     <div
       class='pretui-reco'
+      data-surface={{if @surface @surface 'card'}}
       data-accepted={{if this.accepted 'true'}}
       data-test-pretui-recommendation
       ...attributes
@@ -194,11 +201,17 @@ export class Recommendation extends Component<RecommendationSignature> {
           {{/if}}
           <Button
             @size='s'
-            @tone={{if this.accepted 'success' 'primary'}}
+            @tone={{if this.accepted 'neutral' 'primary'}}
+            @appearance={{if this.accepted 'plain' 'accent'}}
             @disabled={{unless this.active true}}
+            aria-disabled={{if this.accepted 'true'}}
             data-test-pretui-recommendation-accept
             {{on 'click' this.accept}}
-          >{{this.acceptLabel}}</Button>
+          >{{#if this.accepted}}<CheckIcon
+                width='14'
+                height='14'
+                aria-hidden='true'
+              />{{/if}}{{this.acceptLabel}}</Button>
         </span>
       </div>
     </div>
@@ -208,43 +221,60 @@ export class Recommendation extends Component<RecommendationSignature> {
         .pretui-reco {
           width: 100%;
           overflow: hidden;
-          border-radius: var(--radius-surface, 14px);
-          background: var(--card);
+          border-radius: var(--boxel-border-radius-lg);
+          background-color: var(--card);
           box-shadow: var(
             --pretui-shadow-card,
             0 0 0 1px var(--border),
-            0 1px 2px rgb(0 0 0 / 0.08)
+            var(--shadow-xs)
           );
           container-type: inline-size;
         }
+        .pretui-reco[data-surface='plain'] {
+          border-radius: 0;
+          background-color: transparent;
+          box-shadow: none;
+        }
+        .pretui-reco[data-surface='plain'] .pretui-reco-head {
+          padding: 0 0 var(--boxel-sp-xs);
+        }
+        .pretui-reco[data-surface='plain'] .pretui-reco-foot {
+          padding: var(--boxel-sp-xs) 0 var(--boxel-sp-6xs);
+          background-color: transparent;
+        }
         .pretui-reco-head {
-          padding: 12px 14px;
+          padding: var(--boxel-sp-sm);
         }
+        /* the card's title: reading size in 600, no tracking */
         .pretui-reco-question {
           margin: 0;
-          font-size: 13px;
+          font-size: var(--boxel-body-font-size);
+          line-height: var(--boxel-body-line-height);
           font-weight: 600;
-          letter-spacing: -0.01em;
+          color: var(--foreground);
         }
+        /* the recommendation is answer prose: reading type, full ink, the
+           reading measure */
         .pretui-reco-body {
-          margin-top: 6px;
-          min-height: 40px;
-          max-width: 62ch;
-          font-size: var(--text-ui-md, 12.5px);
-          line-height: 1.6;
-          color: var(--muted-foreground);
+          margin-top: var(--boxel-sp-4xs);
+          min-height: 2.5rem;
+          max-inline-size: 68ch;
+          font-size: var(--boxel-body-font-size);
+          line-height: var(--boxel-body-line-height);
+          color: var(--foreground);
         }
         .pretui-reco-drawer {
-          background: var(--inset, var(--boxel-100));
+          background-color: var(--inset);
           box-shadow: 0 -1px 0 var(--border);
-          padding: 8px;
+          padding: var(--boxel-sp-xs);
         }
         .pretui-reco-drawer-cap {
-          margin: 0 0 4px;
-          padding: 0 8px;
-          font-size: 11px;
-          font-weight: 500;
-          color: var(--ink-3, var(--boxel-400));
+          margin: 0 0 var(--boxel-sp-4xs);
+          padding: 0 var(--boxel-sp-xs);
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          font-weight: 400;
+          color: var(--subtle-foreground);
         }
         .pretui-reco-drawer ul {
           margin: 0;
@@ -255,20 +285,21 @@ export class Recommendation extends Component<RecommendationSignature> {
           display: flex;
           width: 100%;
           align-items: center;
-          gap: 10px;
-          min-height: 34px;
-          padding: 6px 8px;
+          gap: var(--boxel-sp-xs);
+          min-height: 2rem;
+          padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
           border: 0;
-          border-radius: 8px;
-          background: none;
-          font: inherit;
-          font-size: var(--text-ui-md, 12.5px);
+          border-radius: var(--boxel-border-radius-sm);
+          background-color: transparent;
+          font-family: inherit;
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
           text-align: left;
           color: var(--foreground);
           cursor: pointer;
         }
         .pretui-reco-alt:hover {
-          background: var(--hover, var(--boxel-100));
+          background-color: var(--hover);
         }
         .pretui-reco-alt:focus-visible {
           outline: 2px solid var(--ring);
@@ -285,16 +316,16 @@ export class Recommendation extends Component<RecommendationSignature> {
           display: flex;
           align-items: center;
           justify-content: space-between;
-          gap: 10px;
+          gap: var(--boxel-sp-xs);
           flex-wrap: wrap;
-          padding: 8px 12px;
-          background: var(--inset, var(--boxel-100));
+          padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
+          background-color: var(--inset);
           box-shadow: 0 -1px 0 var(--border);
         }
         .pretui-reco-foot-actions {
           display: inline-flex;
           align-items: center;
-          gap: 8px;
+          gap: var(--boxel-sp-xs);
           margin-left: auto;
         }
         .pretui-sr {
@@ -307,7 +338,7 @@ export class Recommendation extends Component<RecommendationSignature> {
         }
         @media (any-pointer: coarse) {
           .pretui-reco-alt {
-            min-height: 44px;
+            min-height: 2.75rem;
           }
         }
       }

package/bundled-realms/pretui/components/result-card.gts

@@ -1,65 +1,101 @@
 // Pretui — ResultCard: the settled outcome of an agent run.
 import Component from '@glimmer/component';
+import DotsIcon from '@cardstack/boxel-icons/dots';
 import { on } from '@ember/modifier';
 
 export interface ResultCardSignature {
-  Args: { eyebrow?: string; title: string; lines?: string[]; onMenu?: () => void };
+  Args: {
+    eyebrow?: string;
+    title: string;
+    lines?: string[];
+    onMenu?: () => void;
+  };
   Element: HTMLDivElement;
 }
 
 // What you approve is card-shaped, never a JSON blob.
 export class ResultCard extends Component<ResultCardSignature> {
   menu = () => this.args.onMenu?.();
+  /** the menu button's name says whose actions it holds */
+  get menuLabel(): string {
+    return `More actions for ${this.args.title}`;
+  }
   <template>
     <div class='pretui-resultcard' data-test-pretui-result-card ...attributes>
       <div class='pretui-resultcard-head'>
         {{#if @eyebrow}}<span class='pretui-eyebrow'>{{@eyebrow}}</span>{{/if}}
         <span class='pretui-resultcard-title'>{{@title}}</span>
         {{#if @onMenu}}
-          <button type='button' class='pretui-resultcard-menu' aria-label='More' {{on 'click' this.menu}}>⋯</button>
+          <button
+            type='button'
+            class='pretui-resultcard-menu'
+            aria-label={{this.menuLabel}}
+            {{on 'click' this.menu}}
+            data-test-pretui-result-card-menu
+          ><DotsIcon width='14' height='14' aria-hidden='true' /></button>
         {{/if}}
       </div>
-      {{#each @lines as |line|}}<div class='pretui-resultcard-line'>{{line}}</div>{{/each}}
+      {{#each @lines as |line|}}<div
+          class='pretui-resultcard-line'
+        >{{line}}</div>{{/each}}
     </div>
     <style scoped>
       @layer PretComponent {
         .pretui-resultcard {
-          background: var(--field, var(--boxel-light));
-          border-radius: 8px;
+          background-color: var(--card);
+          color: var(--card-foreground);
+          border-radius: var(--boxel-border-radius-sm);
           box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
-          padding: 9px 11px;
+          padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
           display: flex;
           flex-direction: column;
-          gap: 3px;
+          gap: var(--boxel-sp-4xs);
         }
         .pretui-resultcard-head {
           display: flex;
           align-items: baseline;
-          gap: 8px;
+          gap: var(--boxel-sp-xs);
         }
         .pretui-resultcard-title {
           font-weight: 600;
-          font-size: var(--text-ui-md, 12.5px);
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
+          color: var(--foreground);
         }
+        /* a label, not a kicker: sans caption, no tracking, no caps */
         .pretui-eyebrow {
-          font-family: var(--font-mono);
-          font-size: var(--text-ui-xs, 11px);
-          font-weight: 500;
-          letter-spacing: var(--track-eyebrow, 0.08em);
-          text-transform: uppercase;
-          color: var(--muted-foreground);
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          font-weight: 400;
+          color: var(--subtle-foreground);
         }
+        /* 1.5rem square, the least a pointer target takes */
         .pretui-resultcard-menu {
-          margin-left: auto;
-          color: var(--ink-3, var(--boxel-400));
-          cursor: pointer;
-          letter-spacing: 0.1em;
+          display: inline-grid;
+          place-items: center;
+          flex: none;
+          align-self: center;
+          width: 1.5rem;
+          height: 1.5rem;
+          margin-inline-start: auto;
+          padding: 0;
           border: 0;
-          background: none;
-          font: inherit;
+          border-radius: var(--boxel-border-radius-xs);
+          background-color: transparent;
+          color: var(--subtle-foreground);
+          cursor: pointer;
+        }
+        .pretui-resultcard-menu:hover {
+          background-color: var(--hover);
+          color: var(--foreground);
+        }
+        .pretui-resultcard-menu:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 1px;
         }
         .pretui-resultcard-line {
-          font-size: var(--text-ui-sm, 11.5px);
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
           color: var(--muted-foreground);
         }
       }

package/bundled-realms/pretui/components/segmented-control.gts

@@ -51,17 +51,19 @@ export class SegmentedControl extends Component<SegmentedControlSignature> {
   get value() {
     return this.args.value ?? this.internal;
   }
-  pick = (option: SegmentOption) => {
+  pick = (option: SegmentOption, event: Event) => {
     if (this.args.value === undefined) {
       this.internal = option.value;
     }
     emit([this.args.onValueChange, this.args.onChange], option.value);
     // controlled: the browser already moved the radio; move it back unless the
-    // owner took the new value
+    // owner took the new value. The radios are found inside this control, so
+    // the lookup holds in a shadow root or another document too.
     if (this.args.value !== undefined && this.args.value !== option.value) {
-      for (let radio of document.getElementsByName(
-        this.name,
-      ) as NodeListOf<HTMLInputElement>) {
+      let group = (event.target as HTMLElement).closest('[data-pretui-seg]');
+      for (let radio of group?.querySelectorAll<HTMLInputElement>(
+        '[data-pretui-seg-radio]',
+      ) ?? []) {
         radio.checked = radio.value === this.args.value;
       }
     }
@@ -72,6 +74,7 @@ export class SegmentedControl extends Component<SegmentedControlSignature> {
       class='pretui-seg'
       role='radiogroup'
       aria-label={{@label}}
+      data-pretui-seg
       {{slidingHighlight}}
       data-test-pretui-segmented
       ...attributes
@@ -89,6 +92,7 @@ export class SegmentedControl extends Component<SegmentedControlSignature> {
             value={{option.value}}
             checked={{this.isActive option}}
             disabled={{@disabled}}
+            data-pretui-seg-radio
             {{on 'change' (fn this.pick option)}}
             data-test-pretui-segmented-option={{option.value}}
           />
@@ -118,7 +122,9 @@ export class SegmentedControl extends Component<SegmentedControlSignature> {
           padding: var(--pretui-seg-inset);
           background-color: var(--inset);
           color: var(--foreground);
-          border-radius: calc(var(--pretui-seg-radius) + var(--pretui-seg-inset));
+          border-radius: calc(
+            var(--pretui-seg-radius) + var(--pretui-seg-inset)
+          );
           box-shadow: 0 0 0 1px var(--border);
         }
         .pretui-seg:has(.pretui-seg-input:disabled) {
@@ -164,7 +170,7 @@ export class SegmentedControl extends Component<SegmentedControlSignature> {
         }
         /* the label sits on the pill's --card face */
         .pretui-seg-item[data-state='active'] {
-          color: var(--card-foreground);
+          color: var(--pretui-seg-active-ink, var(--card-foreground));
           font-weight: var(--pretui-seg-active-weight);
         }
         /* a hidden bold copy under the label holds every segment at its bold
@@ -195,4 +201,3 @@ export class SegmentedControl extends Component<SegmentedControlSignature> {
     </style>
   </template>
 }
-

package/bundled-realms/pretui/components/session-prep.gts

@@ -127,35 +127,36 @@ export class SessionPrep extends Component<SessionPrepSignature> {
         .pretui-prep {
           display: flex;
           flex-direction: column;
-          gap: var(--space-4, 11px);
-          padding: var(--space-4, 13px);
-          border-radius: var(--radius-surface, 14px);
-          background: var(--card);
+          gap: var(--boxel-sp-sm);
+          padding: var(--boxel-sp-sm) var(--boxel-sp);
+          border-radius: var(--boxel-border-radius-lg);
+          background-color: var(--card);
           box-shadow: var(
             --pretui-shadow-card,
             0 0 0 1px var(--border),
-            0 1px 2px rgb(0 0 0 / 0.08)
+            var(--shadow-xs)
           );
         }
         .pretui-prep-head {
           display: flex;
           align-items: center;
-          gap: 10px;
+          gap: var(--boxel-sp-xs);
           flex-wrap: wrap;
         }
         .pretui-prep-title {
           margin: 0;
           flex: 1;
           min-width: 0;
-          font-size: 13px;
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
           font-weight: 600;
-          letter-spacing: -0.01em;
+          color: var(--foreground);
         }
         .pretui-prep-note {
           margin: 0;
-          max-width: 62ch;
-          font-size: var(--text-ui-sm, 11.5px);
-          line-height: 1.6;
+          max-width: 68ch;
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
           color: var(--muted-foreground);
         }
       }

package/bundled-realms/pretui/components/sliding-highlight.gts

@@ -190,7 +190,10 @@ export class SlidingHighlight extends Component<SlidingHighlightSignature> {
             var(--pretui-highlight-y, 0px)
           );
           opacity: var(--pretui-highlight-on, 0);
-          border-radius: var(--pretui-highlight-radius, var(--radius));
+          border-radius: var(
+            --pretui-highlight-radius,
+            var(--boxel-border-radius)
+          );
           pointer-events: none;
           z-index: 0;
           transition-property: transform, width, height, opacity;
@@ -205,8 +208,10 @@ export class SlidingHighlight extends Component<SlidingHighlightSignature> {
             cubic-bezier(0.23, 1, 0.32, 1)
           );
         }
-        /* a strong edge, so the pill reads even when its track blends into
-           the surface behind it */
+        /* the pill is a --card face on its --inset rail (the default
+           theme's card is the lighter of the two in light and dark mode);
+           a strong edge and a small shadow keep it raised under any theme,
+           even when the rail blends into the surface behind it */
         .pretui-highlight[data-variant='pill'] {
           background-color: var(--card);
           box-shadow:

package/bundled-realms/pretui/components/speaker-label.gts

@@ -0,0 +1,132 @@
+// Pretui — SpeakerLabel: who said a message in a room with more than one person.
+import Component from '@glimmer/component';
+import { AgentMark } from './agent-mark';
+
+export interface SpeakerLabelSignature {
+  Args: {
+    /** the speaker: 'Rupert', 'Assistant' */
+    name: string;
+    /** whose session carried it: an assistant answering Rupert's question
+     * in Chris's session is 'Assistant · via Chris' */
+    via?: string;
+    /** the speaker is the assistant, not a person */
+    agent?: boolean;
+    /** when, as the caller formats it: '2:04 PM' */
+    time?: string;
+    /** the assistant is working: its mark animates */
+    working?: boolean;
+  };
+  Blocks: {
+    /** the person's own avatar, in place of the initial: the host's profile
+     * mark, so a name in the transcript looks like it does everywhere else */
+    mark: [];
+  };
+  Element: HTMLDivElement;
+}
+
+/**
+ * A name above a message, only where the room has more than one voice. A
+ * person gets an initial; the assistant gets its own mark (AgentMark: the
+ * host's icon, animated while it works), so the two never read alike.
+ */
+export class SpeakerLabel extends Component<SpeakerLabelSignature> {
+  get initial(): string {
+    return this.args.name.trim()[0] ?? '?';
+  }
+  <template>
+    <div
+      class='pretui-speaker'
+      data-agent={{if @agent 'true'}}
+      data-test-pretui-speaker-label
+      ...attributes
+    >
+      {{#if @agent}}
+        <AgentMark class='pretui-speaker-agent' @working={{@working}} />
+      {{else if (has-block 'mark')}}
+        <span class='pretui-speaker-avatar' aria-hidden='true'>{{yield
+            to='mark'
+          }}</span>
+      {{else}}
+        <span
+          class='pretui-speaker-mark'
+          aria-hidden='true'
+        >{{this.initial}}</span>
+      {{/if}}
+      <span class='pretui-speaker-name'>{{@name}}</span>
+      {{#if @via}}<span class='pretui-speaker-via' data-test-pretui-speaker-via>
+          via
+          {{@via}}</span>{{/if}}
+      {{#if @time}}<span class='pretui-speaker-time'>{{@time}}</span>{{/if}}
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-speaker {
+          display: flex;
+          align-items: center;
+          /* the mark is the thread's glyph column, its words one gap after,
+             as every mark in the transcript */
+          gap: var(--pretui-toolrow-gap, var(--boxel-sp-xs));
+          min-width: 0;
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
+          color: var(--muted-foreground);
+        }
+        /* the host's avatar, held to the mark's circle */
+        .pretui-speaker-avatar {
+          flex: none;
+          display: inline-flex;
+          width: var(--pretui-toolrow-disc, 1rem);
+          height: var(--pretui-toolrow-disc, 1rem);
+          overflow: hidden;
+          border-radius: 50%;
+        }
+        .pretui-speaker-mark {
+          flex: none;
+          display: grid;
+          place-items: center;
+          width: var(--pretui-toolrow-disc, 1rem);
+          height: var(--pretui-toolrow-disc, 1rem);
+          border-radius: 50%;
+          background-color: var(--inset);
+          box-shadow: inset 0 0 0 1px var(--border);
+          /* one initial, not a kicker: caption, set to the circle's height */
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          font-weight: 600;
+          text-transform: uppercase;
+          color: var(--foreground);
+        }
+        .pretui-speaker-name {
+          font-weight: 600;
+          color: var(--foreground);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .pretui-speaker-via,
+        .pretui-speaker-time {
+          white-space: nowrap;
+        }
+        /* the assistant's name is one short word and always reads; what
+           follows it (a time, or a turn's "Worked for 2m 55s · 6 calls")
+           gives way first */
+        .pretui-speaker[data-agent] .pretui-speaker-name {
+          flex: none;
+        }
+        .pretui-speaker[data-agent] .pretui-speaker-time {
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .pretui-speaker-via::before,
+        .pretui-speaker-time::before {
+          content: '·';
+          margin-inline-end: var(--boxel-sp-xs);
+        }
+        .pretui-speaker-time {
+          font-variant-numeric: tabular-nums;
+        }
+      }
+    </style>
+  </template>
+}