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

package/bundled-realms/pretui/components/composer-cap.gts

@@ -0,0 +1,516 @@
+// Pretui — ComposerCap: the dark cap on the composer's top edge. One status row, what the agent does now; the messages queued behind it; then the box.
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import type { ComponentLike } from '@glint/template';
+import ArrowDownIcon from '@cardstack/boxel-icons/arrow-down';
+import ChevronDownIcon from '@cardstack/boxel-icons/chevron-down';
+import ChevronUpIcon from '@cardstack/boxel-icons/chevron-up';
+import ListIcon from '@cardstack/boxel-icons/list';
+import PencilIcon from '@cardstack/boxel-icons/pencil';
+import PlayerStopIcon from '@cardstack/boxel-icons/player-stop';
+import RotateCcwIcon from '@cardstack/boxel-icons/rotate-ccw';
+import XIcon from '@cardstack/boxel-icons/x';
+import { AgentMark } from './agent-mark';
+
+export type CapTone = 'working' | 'waiting' | 'problem' | 'done' | 'idle';
+export type CapButtonKind = 'primary' | 'secondary' | 'quiet' | 'icon';
+export type CapGlyph =
+  | 'stop'
+  | 'retry'
+  | 'jump'
+  | 'edit'
+  | 'remove'
+  | 'collapse'
+  | 'expand';
+
+export interface CapButtonSignature {
+  Args: {
+    /** primary is the moment's one action, in solid --primary. Default 'secondary' */
+    kind?: CapButtonKind;
+    /** a glyph before the words, or alone for kind 'icon' */
+    glyph?: CapGlyph;
+    /** the click is running: the button holds its size and greys */
+    busy?: boolean;
+  };
+  Blocks: { default: [] };
+  Element: HTMLButtonElement;
+}
+
+/** A button sized for the cap's row: 1.75rem in the status row, 1.5rem in a queued row. */
+export class CapButton extends Component<CapButtonSignature> {
+  <template>
+    <button
+      type='button'
+      class='pretui-cap-button'
+      data-kind={{if @kind @kind 'secondary'}}
+      data-busy={{if @busy 'true'}}
+      aria-busy={{if @busy 'true'}}
+      ...attributes
+    >{{#if @glyph}}<CapGlyphIcon @glyph={{@glyph}} />{{/if}}{{yield}}</button>
+  </template>
+}
+
+type CapIcon = ComponentLike<{ Element: SVGSVGElement }>;
+
+/** each glyph is a boxel-icons mark, so the cap draws its icons the way
+ * the rest of the kit does and a theme recolours them all */
+const CAP_ICONS: Record<CapGlyph, CapIcon> = {
+  stop: PlayerStopIcon as CapIcon,
+  retry: RotateCcwIcon as CapIcon,
+  jump: ArrowDownIcon as CapIcon,
+  edit: PencilIcon as CapIcon,
+  remove: XIcon as CapIcon,
+  collapse: ChevronUpIcon as CapIcon,
+  expand: ChevronDownIcon as CapIcon,
+};
+
+class CapGlyphIcon extends Component<{ Args: { glyph: CapGlyph } }> {
+  get icon(): CapIcon {
+    return CAP_ICONS[this.args.glyph];
+  }
+  <template>
+    <this.icon
+      class='pretui-cap-glyph'
+      data-glyph={{@glyph}}
+      width='12'
+      height='12'
+      aria-hidden='true'
+    />
+  </template>
+}
+
+export interface CapStatusSignature {
+  Args: {
+    /** what kind of moment: working animates the agent's mark; waiting is the
+        attention dot; problem the destructive dot; done the success dot;
+        idle the still mark, dimmed. Default 'working' */
+    tone?: CapTone;
+    /** the status in a few words: "Generating results", "Run 3 tool calls" */
+    title: string;
+    /** what qualifies it, quieter: "3 calls", "1 of 3" */
+    detail?: string;
+    /** three breathing dots after the title, for a reply still arriving */
+    dots?: boolean;
+    /** let the words wrap: an instruction ("You need a minimum of…") */
+    wrap?: boolean;
+  };
+  Blocks: { default: [] };
+  Element: HTMLDivElement;
+}
+
+/** The cap's one status row. Its actions are the block, right-aligned. */
+export class CapStatus extends Component<CapStatusSignature> {
+  get tone(): CapTone {
+    return this.args.tone ?? 'working';
+  }
+  get showsMark() {
+    return this.tone === 'working' || this.tone === 'idle';
+  }
+  get working() {
+    return this.tone === 'working';
+  }
+  <template>
+    <div
+      class='pretui-cap-row pretui-cap-status'
+      data-tone={{this.tone}}
+      data-wrap={{if @wrap 'true'}}
+      data-test-pretui-cap-status={{this.tone}}
+      ...attributes
+    >
+      <span class='pretui-cap-lead' aria-hidden='true'>
+        {{#if this.showsMark}}
+          <AgentMark @working={{this.working}} @size={{18}} />
+        {{else}}
+          <span class='pretui-cap-dot'></span>
+        {{/if}}
+      </span>
+      {{! the status region holds the words only, so a change announces the
+          status and not the row's buttons }}
+      <span
+        class='pretui-cap-text'
+        role='status'
+        aria-atomic='true'
+        data-test-pretui-cap-status-text
+      ><span class='pretui-cap-title'>{{@title}}</span>{{#if @dots}}<span
+            class='pretui-cap-dots'
+            aria-hidden='true'
+          ><span>.</span><span>.</span><span>.</span></span>{{/if}}{{#if
+          @detail
+        }}<span class='pretui-cap-detail'> · {{@detail}}</span>{{/if}}</span>
+      <span class='pretui-cap-actions'>{{yield}}</span>
+    </div>
+  </template>
+}
+
+export interface CapQueuedSignature {
+  Args: {
+    /** where it stands in line: "Next", "Then" */
+    order?: string;
+    text: string;
+    /** pull it back into the box to change it */
+    onEdit?: () => void;
+    /** take it out of the queue */
+    onRemove?: () => void;
+  };
+  Element: HTMLDivElement;
+}
+
+/** A message waiting behind the running turn, in send order under the status. */
+export class CapQueued extends Component<CapQueuedSignature> {
+  edit = () => this.args.onEdit?.();
+  remove = () => this.args.onRemove?.();
+  <template>
+    <div
+      class='pretui-cap-row pretui-cap-queued'
+      data-test-pretui-cap-queued
+      ...attributes
+    >
+      <span class='pretui-cap-lead' aria-hidden='true'><ListIcon
+          class='pretui-cap-glyph'
+          width='13'
+          height='13'
+        /></span>
+      <span class='pretui-cap-text'>{{#if @order}}<span
+            class='pretui-cap-detail'
+          >{{@order}} · </span>{{/if}}{{@text}}</span>
+      <span class='pretui-cap-actions'>
+        {{#if @onEdit}}
+          <CapButton
+            @kind='icon'
+            @glyph='edit'
+            aria-label='Edit queued message'
+            {{on 'click' this.edit}}
+            data-test-pretui-cap-queued-edit
+          />
+        {{/if}}
+        {{#if @onRemove}}
+          <CapButton
+            @kind='icon'
+            @glyph='remove'
+            aria-label='Remove queued message'
+            {{on 'click' this.remove}}
+            data-test-pretui-cap-queued-remove
+          />
+        {{/if}}
+      </span>
+    </div>
+  </template>
+}
+
+export interface CapSectionSignature {
+  Blocks: { default: [] };
+  Element: HTMLDivElement;
+}
+
+/** Room under the status for what belongs to it: a script's plan. */
+const CapSection = <template>
+  <div class='pretui-cap-section' ...attributes>{{yield}}</div>
+</template> satisfies import('@ember/component/template-only').TemplateOnlyComponent<CapSectionSignature>;
+
+export interface ComposerCapSignature {
+  Args: {
+    /** the group's accessible name. Default 'Assistant status' */
+    label?: string;
+  };
+  Blocks: {
+    default: [
+      {
+        Status: typeof CapStatus;
+        Queued: typeof CapQueued;
+        Section: typeof CapSection;
+        Button: typeof CapButton;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+/**
+ * The dark cap on the composer's top edge. Read down, the panel is a
+ * timeline: the transcript (done), the cap's status (now), its queue (next),
+ * the box (what you are still writing). One status at a time, the most
+ * urgent: a decision, a problem, work, idle.
+ */
+export class ComposerCap extends Component<ComposerCapSignature> {
+  <template>
+    <div
+      class='pretui-cap'
+      role='group'
+      aria-label={{if @label @label 'Assistant status'}}
+      data-test-pretui-composer-cap
+      ...attributes
+    >
+      {{yield
+        (hash
+          Status=CapStatus Queued=CapQueued Section=CapSection Button=CapButton
+        )
+      }}
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-cap {
+          --pretui-cap-ink: var(--foreground);
+          /* a row's least height, which its buttons fill */
+          --_cap-row-h: 1.75rem;
+          display: flex;
+          flex-direction: column;
+          margin-inline: var(--pretui-cap-inset, var(--boxel-sp-sm));
+          border-radius: var(--boxel-border-radius-lg)
+            var(--boxel-border-radius-lg) 0 0;
+          background-color: var(
+            --pretui-cap-surface,
+            color-mix(in oklch, var(--foreground) 8%, var(--background))
+          );
+          box-shadow: 0 0 0 1px var(--pretui-cap-edge, var(--border-strong));
+          color: var(--pretui-cap-ink);
+          font-family: var(--font-sans);
+          container: pretui-cap / inline-size;
+        }
+        /* a narrow cap keeps the moment's primary and drops what it can
+           reach another way */
+        @container pretui-cap (width < 20rem) {
+          .pretui-cap :deep([data-cap-optional]) {
+            display: none;
+          }
+        }
+        /* every row is UI size; a queued row is the compact one */
+        .pretui-cap :deep(.pretui-cap-row) {
+          display: flex;
+          align-items: center;
+          gap: var(--boxel-sp-xs);
+          min-height: var(--_cap-row-h);
+          padding: 0 var(--boxel-sp-4xs) 0 var(--boxel-sp-xs);
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
+          font-weight: 400;
+          min-width: 0;
+        }
+        .pretui-cap > :deep(* + *) {
+          box-shadow: inset 0 1px 0 var(--pretui-cap-edge, var(--border-strong));
+        }
+        /* the status is the row you read first: one step stronger than the
+           queue by weight (its title is 600) and height, never by size */
+        .pretui-cap :deep(.pretui-cap-status) {
+          min-height: 2.25rem;
+          padding: 0 var(--boxel-sp-4xs) 0 var(--boxel-sp-xs);
+        }
+        .pretui-cap :deep(.pretui-cap-status[data-wrap]) {
+          align-items: flex-start;
+          padding-block: var(--boxel-sp-xs);
+        }
+        .pretui-cap :deep(.pretui-cap-status[data-wrap] .pretui-cap-lead) {
+          margin-top: 0;
+        }
+        .pretui-cap :deep(.pretui-cap-status[data-wrap] .pretui-cap-actions) {
+          margin-top: calc(-1 * var(--boxel-sp-4xs));
+        }
+        .pretui-cap :deep(.pretui-cap-lead) {
+          flex: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 1.125rem;
+          height: 1.125rem;
+        }
+        .pretui-cap :deep(.pretui-cap-queued .pretui-cap-lead) {
+          width: 1rem;
+          height: 1rem;
+          color: var(--subtle-foreground);
+        }
+        .pretui-cap
+          :deep(.pretui-cap-status[data-tone='idle'] .pretui-cap-lead) {
+          opacity: 0.55;
+        }
+        .pretui-cap :deep(.pretui-cap-dot) {
+          width: 0.5rem;
+          height: 0.5rem;
+          border-radius: 50%;
+          background-color: currentColor;
+          box-shadow: 0 0 0 0.1875rem
+            color-mix(in oklch, currentColor 20%, transparent);
+          transition: color 160ms ease;
+        }
+        /* a state colours the mark only: waiting on you is attention, a
+           problem is failed, done and live work are live */
+        .pretui-cap
+          :deep(.pretui-cap-status[data-tone='waiting'] .pretui-cap-lead) {
+          color: var(--attention-ink);
+        }
+        .pretui-cap
+          :deep(.pretui-cap-status[data-tone='problem'] .pretui-cap-lead) {
+          color: var(--destructive-ink);
+        }
+        .pretui-cap
+          :deep(.pretui-cap-status[data-tone='done'] .pretui-cap-lead) {
+          color: var(--primary-ink);
+        }
+        /* the title holds its words; the detail gives way first */
+        .pretui-cap :deep(.pretui-cap-text) {
+          flex: 1 1 auto;
+          display: flex;
+          align-items: baseline;
+          min-width: 0;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+        .pretui-cap :deep(.pretui-cap-title) {
+          flex: 0 1 auto;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .pretui-cap :deep(.pretui-cap-dots) {
+          flex: none;
+        }
+        .pretui-cap :deep(.pretui-cap-text > .pretui-cap-detail) {
+          flex: 0 4 auto;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: pre;
+        }
+        .pretui-cap :deep(.pretui-cap-status[data-wrap] .pretui-cap-text) {
+          display: block;
+          white-space: normal;
+          overflow-wrap: anywhere;
+          color: var(--muted-foreground);
+        }
+        .pretui-cap :deep(.pretui-cap-status[data-wrap] .pretui-cap-title) {
+          font-weight: 400;
+        }
+        .pretui-cap :deep(.pretui-cap-title) {
+          font-weight: 600;
+        }
+        .pretui-cap :deep(.pretui-cap-queued .pretui-cap-text) {
+          color: var(--muted-foreground);
+        }
+        .pretui-cap :deep(.pretui-cap-detail) {
+          color: var(--muted-foreground);
+          font-weight: 400;
+          font-variant-numeric: tabular-nums;
+        }
+        .pretui-cap :deep(.pretui-cap-dots span) {
+          animation: pretui-cap-blink 1.4s infinite both;
+          opacity: 0.4;
+        }
+        .pretui-cap :deep(.pretui-cap-dots span:nth-child(2)) {
+          animation-delay: 0.2s;
+        }
+        .pretui-cap :deep(.pretui-cap-dots span:nth-child(3)) {
+          animation-delay: 0.4s;
+        }
+        @keyframes pretui-cap-blink {
+          0%,
+          80%,
+          100% {
+            opacity: 0.4;
+          }
+          40% {
+            opacity: 1;
+          }
+        }
+        .pretui-cap :deep(.pretui-cap-actions) {
+          flex: none;
+          display: flex;
+          align-items: center;
+          gap: var(--boxel-sp-4xs);
+        }
+        .pretui-cap :deep(.pretui-cap-actions:empty) {
+          display: none;
+        }
+        .pretui-cap :deep(.pretui-cap-section) {
+          padding: var(--boxel-sp-4xs) var(--boxel-sp-sm) var(--boxel-sp-xs)
+            var(--boxel-sp-xl);
+        }
+        .pretui-cap :deep(.pretui-cap-button) {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: var(--boxel-sp-4xs);
+          height: 1.5rem;
+          min-width: 1.5rem;
+          padding: 0 var(--boxel-sp-xs);
+          border: 0;
+          border-radius: var(--boxel-border-radius-sm);
+          background-color: transparent;
+          color: var(--muted-foreground);
+          font-family: var(--font-sans);
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
+          font-weight: 600;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+        .pretui-cap :deep(.pretui-cap-status .pretui-cap-button) {
+          height: var(--_cap-row-h);
+          min-width: var(--_cap-row-h);
+          padding: 0 var(--boxel-sp-sm);
+        }
+        .pretui-cap
+          :deep(.pretui-cap-status .pretui-cap-button[data-kind='icon']) {
+          padding: 0;
+        }
+        .pretui-cap :deep(.pretui-cap-button[data-kind='icon']) {
+          padding: 0;
+        }
+        /* the moment's one action */
+        .pretui-cap :deep(.pretui-cap-button[data-kind='primary']) {
+          background-color: var(--primary);
+          color: var(--primary-foreground);
+        }
+        .pretui-cap
+          :deep(.pretui-cap-button[data-kind='primary']:hover:not(:disabled)) {
+          background-color: color-mix(
+            in oklch,
+            var(--primary) 88%,
+            var(--pretui-cap-ink)
+          );
+        }
+        .pretui-cap :deep(.pretui-cap-button[data-kind='secondary']) {
+          box-shadow: inset 0 0 0 1px var(--border-strong);
+          color: var(--pretui-cap-ink);
+        }
+        .pretui-cap :deep(.pretui-cap-button[data-kind='quiet']),
+        .pretui-cap :deep(.pretui-cap-button[data-kind='icon']) {
+          color: var(--muted-foreground);
+        }
+        .pretui-cap
+          :deep(.pretui-cap-button[data-kind='quiet']:hover:not(:disabled)),
+        .pretui-cap
+          :deep(.pretui-cap-button[data-kind='icon']:hover:not(:disabled)) {
+          color: var(--pretui-cap-ink);
+          background-color: color-mix(
+            in oklch,
+            var(--pretui-cap-ink) 8%,
+            transparent
+          );
+        }
+        .pretui-cap :deep(.pretui-cap-button:disabled),
+        .pretui-cap :deep(.pretui-cap-button[data-busy]) {
+          cursor: default;
+          background-color: color-mix(
+            in oklch,
+            var(--pretui-cap-ink) 10%,
+            transparent
+          );
+          color: var(--subtle-foreground);
+          box-shadow: none;
+        }
+        .pretui-cap :deep(.pretui-cap-button:focus-visible) {
+          outline: 2px solid var(--ring);
+          outline-offset: 1px;
+        }
+        .pretui-cap :deep(.pretui-cap-glyph) {
+          flex: none;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-cap :deep(.pretui-cap-dots span) {
+            animation: none;
+            opacity: 0.7;
+          }
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/context-ring.gts

@@ -0,0 +1,108 @@
+// Pretui — ContextRing: how much of the model's context the conversation uses, as a small ring.
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+
+export interface ContextRingSignature {
+  Args: {
+    /** tokens the conversation uses */
+    used: number;
+    /** the model's context window, in tokens */
+    limit: number;
+    /** the share at which the ring warns. Default 0.8 */
+    warnAt?: number;
+    /** the ring alone: the percentage moves to its tooltip, for a tight
+     * composer bar */
+    compact?: boolean;
+  };
+  Element: HTMLSpanElement;
+}
+
+function compact(n: number): string {
+  return n >= 1000 ? `${Math.round(n / 100) / 10}k` : String(n);
+}
+
+/**
+ * A small ring and its percentage, beside the model picker: how full the
+ * context is, so a reader sees compaction coming before it happens. The
+ * ring turns to the attention colour past @warnAt, and its name says
+ * "nearly full".
+ */
+export class ContextRing extends Component<ContextRingSignature> {
+  get share(): number {
+    let { used, limit } = this.args;
+    return limit > 0 ? Math.min(Math.max(used / limit, 0), 1) : 0;
+  }
+  get percent(): number {
+    return Math.round(this.share * 100);
+  }
+  get warns(): boolean {
+    return this.share >= (this.args.warnAt ?? 0.8);
+  }
+  get ringStyle() {
+    return htmlSafe(`--pretui-ring-share: ${this.share * 360}deg`);
+  }
+  /** the accessible name and tooltip; past @warnAt it says so in words, so
+   * the warning never rests on the ring's colour alone */
+  get label(): string {
+    let warning = this.warns ? ', nearly full' : '';
+    return `Context ${this.percent}% used${warning}: ${compact(this.args.used)} of ${compact(this.args.limit)} tokens`;
+  }
+  <template>
+    <span
+      class='pretui-contextring'
+      role='img'
+      aria-label={{this.label}}
+      title={{this.label}}
+      data-warn={{if this.warns 'true'}}
+      data-test-pretui-context-ring
+      ...attributes
+    >
+      <span
+        class='pretui-contextring-ring'
+        style={{this.ringStyle}}
+        aria-hidden='true'
+      ></span>
+      {{#unless @compact}}<span
+          class='pretui-contextring-pct'
+          aria-hidden='true'
+        >{{this.percent}}%</span>{{/unless}}
+    </span>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-contextring {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--boxel-sp-4xs);
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          font-variant-numeric: tabular-nums;
+          color: var(--muted-foreground);
+        }
+        .pretui-contextring-ring {
+          --_contextring-ink: var(--muted-foreground);
+          width: 0.875rem;
+          height: 0.875rem;
+          border-radius: 50%;
+          background: conic-gradient(
+            var(--_contextring-ink) var(--pretui-ring-share),
+            var(--border-strong) 0
+          );
+          -webkit-mask: radial-gradient(
+            circle,
+            transparent 0.25rem,
+            black 0.28125rem
+          );
+          mask: radial-gradient(circle, transparent 0.25rem, black 0.28125rem);
+        }
+        /* past the warning share the ring (the mark) takes the attention
+           ink, and the digits step up to the full foreground */
+        .pretui-contextring[data-warn] {
+          color: var(--foreground);
+        }
+        .pretui-contextring[data-warn] .pretui-contextring-ring {
+          --_contextring-ink: var(--attention-ink);
+        }
+      }
+    </style>
+  </template>
+}