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

package/bundled-realms/pretui/components/system-line.gts

@@ -0,0 +1,143 @@
+// Pretui — SystemLine: a change to the conversation itself, said once in the thread.
+import Component from '@glimmer/component';
+import { StateGlyph } from './state-glyph';
+import { on } from '@ember/modifier';
+
+export interface SystemLineSignature {
+  Args: {
+    /** what changed: 'Model set to GPT-5.6 Terra', 'Skills on: Showcase' */
+    text: string;
+    /** one character before it. Default '·' */
+    glyph?: string;
+    /** who changed it, when it was not the reader: 'the assistant',
+     * 'Rupert' */
+    by?: string;
+    /** 'line' (default), or 'checkpoint': a rule across the thread with
+     * the point's name on it, a place the session can go back to */
+    variant?: 'line' | 'checkpoint';
+    /** one verb on the line: Restore (a checkpoint), Switch back (a model
+     * fallback), Fix (a broken skill) */
+    action?: string;
+    onAction?: () => void;
+    /** dismiss a notice the reader has seen */
+    onDismiss?: () => void;
+  };
+  Element: HTMLParagraphElement;
+}
+
+/**
+ * A model switch, a skill turned on, someone joining: facts about the
+ * room, not work, so they read as one caption line on the transcript's text
+ * edge between turns, never as a row.
+ */
+export class SystemLine extends Component<SystemLineSignature> {
+  act = () => this.args.onAction?.();
+  dismiss = () => this.args.onDismiss?.();
+  <template>
+    <p
+      class='pretui-systemline'
+      data-variant={{if @variant @variant 'line'}}
+      data-test-pretui-system-line
+      ...attributes
+    >
+      <StateGlyph
+        class='pretui-systemline-glyph'
+        @glyph={{if @glyph @glyph '·'}}
+        @size={{11}}
+      />
+      <span class='pretui-systemline-text'>{{@text}}{{#if @by}}<span
+            class='pretui-systemline-by'
+          > · by {{@by}}</span>{{/if}}</span>
+      {{#if @onAction}}<button
+          type='button'
+          class='pretui-systemline-act'
+          data-test-pretui-system-line-action
+          {{on 'click' this.act}}
+        >{{if @action @action 'Restore'}}</button>{{/if}}
+      {{#if @onDismiss}}<button
+          type='button'
+          class='pretui-systemline-act'
+          aria-label='Dismiss'
+          data-test-pretui-system-line-dismiss
+          {{on 'click' this.dismiss}}
+        ><StateGlyph @glyph='failed' @size={{11}} /></button>{{/if}}
+    </p>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-systemline {
+          display: grid;
+          grid-template-columns:
+            var(--pretui-toolrow-disc, 1rem) minmax(0, 1fr)
+            auto auto;
+          column-gap: var(--pretui-toolrow-gap, var(--boxel-sp-xs));
+          align-items: baseline;
+          margin: 0;
+          /* on the transcript's text edge; inside a row, the row's inset */
+          padding-inline: var(--pretui-toolrow-inset, 0);
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          color: var(--subtle-foreground);
+        }
+        .pretui-systemline-glyph {
+          text-align: center;
+        }
+        .pretui-systemline-text {
+          min-width: 0;
+          overflow-wrap: break-word;
+        }
+        /* a checkpoint is a rule across the thread with its name on it. A
+           flex row, not a grid, so the two rules take the slack on either
+           side of whatever sits between them: the name alone, or the name
+           with an action, a dismiss button or both, all on one line */
+        .pretui-systemline[data-variant='checkpoint'] {
+          display: flex;
+          align-items: center;
+          column-gap: var(--boxel-sp-xs);
+        }
+        .pretui-systemline[data-variant='checkpoint']::before,
+        .pretui-systemline[data-variant='checkpoint']::after {
+          content: '';
+          flex: 1 1 var(--boxel-sp-sm);
+          min-width: var(--boxel-sp-sm);
+          height: 1px;
+          background-color: var(--border);
+        }
+        .pretui-systemline[data-variant='checkpoint'] .pretui-systemline-glyph {
+          display: none;
+        }
+        /* a 24px target (WCAG 2.5.8) inside a caption line: the negative
+           block margin gives back what the height adds, so the line keeps
+           its caption height */
+        .pretui-systemline-act {
+          --_systemline-target: 1.5rem;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: var(--_systemline-target);
+          min-height: var(--_systemline-target);
+          margin-block: calc((1lh - var(--_systemline-target)) / 2);
+          padding: 0 var(--boxel-sp-4xs);
+          border: 0;
+          border-radius: var(--boxel-border-radius-xs);
+          background-color: transparent;
+          font-family: inherit;
+          font-size: inherit;
+          line-height: inherit;
+          font-weight: 600;
+          color: var(--muted-foreground);
+          cursor: pointer;
+        }
+        .pretui-systemline-act:hover {
+          color: var(--primary-ink);
+        }
+        .pretui-systemline-act:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 1px;
+        }
+        .pretui-systemline-by {
+          color: var(--muted-foreground);
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/task-checklist.gts

@@ -0,0 +1,184 @@
+// Pretui — TaskChecklist: what the agent is doing now, over the plan it is working through.
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import ChevronRightIcon from '@cardstack/boxel-icons/chevron-right';
+import { ToolPlan } from './tool-plan';
+import type { ToolPlanStep } from './tool-plan';
+
+export interface TaskChecklistSignature {
+  Args: {
+    steps: ToolPlanStep[];
+    /** what the agent is doing this moment, in its own words: "Fixing the
+     * regex lint error; read host approval test". Shimmers while it runs */
+    activity?: string;
+    /** open the activity's detail (the call it is making). Omit and the
+     * line is plain text */
+    onActivity?: () => void;
+    /** the run is still going. Default: a step is under way */
+    running?: boolean;
+    /** the list's accessible name. Default 'Tasks' */
+    label?: string;
+  };
+  Element: HTMLElement;
+}
+
+/**
+ * The plan the agent keeps while it works, as the reader follows it: the
+ * thing it is doing now on one line, then every step with its mark — a
+ * soft tick for done, a thin turning ring for the one under way, a dashed
+ * circle for what is left. Steps finish in any order; a done step steps
+ * back in ink so the eye lands on the work still to do. One soft card, no
+ * stripe.
+ */
+export class TaskChecklist extends Component<TaskChecklistSignature> {
+  get running(): boolean {
+    return (
+      this.args.running ??
+      this.args.steps.some((step) => step.state === 'current')
+    );
+  }
+  get done(): number {
+    return this.args.steps.filter((step) => step.state === 'done').length;
+  }
+  get summary(): string {
+    return `${this.done} of ${this.args.steps.length} done`;
+  }
+  activity = () => this.args.onActivity?.();
+  <template>
+    <section
+      class='pretui-checklist'
+      data-running={{if this.running 'true'}}
+      aria-label={{if @label @label 'Tasks'}}
+      data-test-pretui-task-checklist
+      ...attributes
+    >
+      {{#if @activity}}
+        {{#if @onActivity}}
+          <button
+            type='button'
+            class='pretui-checklist-activity'
+            data-test-pretui-task-checklist-activity
+            {{on 'click' this.activity}}
+          >
+            <span class='pretui-checklist-activity-text'>{{@activity}}</span>
+            <ChevronRightIcon
+              class='pretui-checklist-chevron'
+              width='14'
+              height='14'
+            />
+          </button>
+        {{else}}
+          <p
+            class='pretui-checklist-activity'
+            data-test-pretui-task-checklist-activity
+          >
+            <span class='pretui-checklist-activity-text'>{{@activity}}</span>
+          </p>
+        {{/if}}
+      {{/if}}
+      <div class='pretui-checklist-card'>
+        <ToolPlan
+          @steps={{@steps}}
+          @density='comfortable'
+          @label={{if @label @label 'Tasks'}}
+        />
+        <span
+          class='pretui-checklist-summary'
+          role='status'
+          data-test-pretui-task-checklist-summary
+        >{{this.summary}}</span>
+      </div>
+    </section>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-checklist {
+          display: grid;
+          gap: var(--boxel-sp-xs);
+          min-width: 0;
+        }
+        .pretui-checklist-activity {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--boxel-sp-4xs);
+          justify-self: start;
+          max-width: 100%;
+          margin: 0;
+          padding: 0;
+          border: 0;
+          background-color: transparent;
+          font-family: inherit;
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
+          text-align: start;
+          color: var(--muted-foreground);
+        }
+        button.pretui-checklist-activity {
+          cursor: pointer;
+        }
+        button.pretui-checklist-activity:hover {
+          color: var(--foreground);
+        }
+        button.pretui-checklist-activity:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+          border-radius: var(--boxel-border-radius-xs);
+        }
+        .pretui-checklist-activity-text {
+          min-width: 0;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        /* while it runs, the line's tail shimmers as TextShimmer does */
+        .pretui-checklist[data-running] .pretui-checklist-activity-text {
+          background: linear-gradient(
+              90deg,
+              var(--muted-foreground) 0%,
+              var(--muted-foreground) 40%,
+              var(--foreground) 50%,
+              var(--muted-foreground) 60%,
+              var(--muted-foreground) 100%
+            )
+            0 0 / 300% 100%;
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          animation: pretui-checklist-shimmer 2.4s linear infinite;
+        }
+        @keyframes pretui-checklist-shimmer {
+          from {
+            background-position: 100% 0;
+          }
+          to {
+            background-position: 0% 0;
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-checklist[data-running] .pretui-checklist-activity-text {
+            animation: none;
+            background-image: none;
+            color: var(--muted-foreground);
+          }
+        }
+        .pretui-checklist-chevron {
+          flex: none;
+        }
+        .pretui-checklist-card {
+          padding: var(--boxel-sp-sm);
+          border-radius: var(--boxel-border-radius-lg);
+          box-shadow: inset 0 0 0 1px var(--border);
+          background-color: var(--card);
+        }
+        /* the count is for a screen reader; the marks say it to the eye */
+        .pretui-checklist-summary {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+          white-space: nowrap;
+        }
+      }
+    </style>
+  </template>
+}

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

@@ -3,6 +3,10 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { guidFor } from '@ember/object/internals';
+import CheckIcon from '@cardstack/boxel-icons/check';
+import ChevronDownIcon from '@cardstack/boxel-icons/chevron-down';
+import SearchIcon from '@cardstack/boxel-icons/search';
+import SparklesIcon from '@cardstack/boxel-icons/sparkles';
 import { Spinner } from './spinner';
 import { cssStyleFrom } from '../pretui-css';
 import { Collapse } from '../internal/agentic-chat';
@@ -130,35 +134,26 @@ export class Thinking extends Component<ThinkingSignature> {
         data-test-pretui-thinking-toggle
         {{on 'click' this.toggle}}
       >
-        <svg
+        <SparklesIcon
           class='pretui-trace-spark'
-          viewBox='0 0 24 24'
+          width='15'
+          height='15'
           aria-hidden='true'
-          focusable='false'
-        >
-          <path d='M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z' />
-        </svg>
+        />
         {{#if this.working}}
-          <span class='pretui-trace-label' data-shimmer='true'
+          <span
+            class='pretui-trace-label'
+            data-shimmer='true'
           >{{this.label}}</span>
         {{else}}
           <span class='pretui-trace-label'>{{this.doneLabel}}</span>
         {{/if}}
-        <svg
+        <ChevronDownIcon
           class='pretui-trace-chev'
-          viewBox='0 0 24 24'
+          width='14'
+          height='14'
           aria-hidden='true'
-          focusable='false'
-        >
-          <path
-            d='M6 9l6 6 6-6'
-            fill='none'
-            stroke='currentColor'
-            stroke-width='2.2'
-            stroke-linecap='round'
-            stroke-linejoin='round'
-          />
-        </svg>
+        />
       </button>
       {{! the state change announces once, politely, from outside the button }}
       <span class='pretui-sr' role='status'>{{if
@@ -171,23 +166,7 @@ export class Thinking extends Component<ThinkingSignature> {
         <div class='pretui-trace-rail' data-open={{if this.expanded 'true'}}>
           {{#if @query}}
             <div class='pretui-trace-row' data-kind='query'>
-              <svg viewBox='0 0 24 24' aria-hidden='true' focusable='false'>
-                <circle
-                  cx='11'
-                  cy='11'
-                  r='7'
-                  fill='none'
-                  stroke='currentColor'
-                  stroke-width='2'
-                />
-                <path
-                  d='M21 21l-4.3-4.3'
-                  fill='none'
-                  stroke='currentColor'
-                  stroke-width='2'
-                  stroke-linecap='round'
-                />
-              </svg>
+              <SearchIcon width='13' height='13' aria-hidden='true' />
               <span class='pretui-trace-primary'>{{@query}}</span>
             </div>
           {{/if}}
@@ -196,21 +175,12 @@ export class Thinking extends Component<ThinkingSignature> {
               {{#if row.isRunning}}
                 <Spinner @size={{11}} />
               {{else if row.isDone}}
-                <svg
+                <CheckIcon
                   class='pretui-trace-check'
-                  viewBox='0 0 24 24'
+                  width='13'
+                  height='13'
                   aria-hidden='true'
-                  focusable='false'
-                >
-                  <path
-                    d='M20 6L9 17l-5-5'
-                    fill='none'
-                    stroke='currentColor'
-                    stroke-width='2.5'
-                    stroke-linecap='round'
-                    stroke-linejoin='round'
-                  />
-                </svg>
+                />
               {{/if}}
               <span
                 class='pretui-trace-primary'
@@ -238,7 +208,8 @@ export class Thinking extends Component<ThinkingSignature> {
     <style scoped>
       @layer PretComponent {
         .pretui-trace {
-          font-size: var(--text-ui-md, 12.5px);
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
         }
         .pretui-sr {
           position: absolute;
@@ -251,35 +222,33 @@ export class Thinking extends Component<ThinkingSignature> {
         .pretui-trace-head {
           display: inline-flex;
           align-items: center;
-          gap: 8px;
-          min-height: 28px;
-          padding: 4px 6px;
-          margin: -4px -6px;
+          gap: var(--boxel-sp-xs);
+          min-height: 1.75rem;
+          padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
+          margin: calc(-1 * var(--boxel-sp-4xs)) calc(-1 * var(--boxel-sp-xs));
           border: 0;
-          border-radius: 8px;
-          background: none;
-          font: inherit;
+          border-radius: var(--boxel-border-radius-sm);
+          background-color: transparent;
+          font-family: inherit;
           color: var(--muted-foreground);
           cursor: pointer;
         }
         .pretui-trace-head:hover {
-          background: var(--hover, var(--boxel-100));
+          background-color: var(--hover);
         }
         .pretui-trace-head:focus-visible {
           outline: 2px solid var(--ring);
           outline-offset: 1px;
         }
         .pretui-trace-spark {
-          width: 15px;
-          height: 15px;
           flex: none;
-          fill: var(--ink-3, var(--boxel-400));
+          color: var(--subtle-foreground);
         }
         .pretui-trace-head[data-working] .pretui-trace-spark {
-          fill: var(--muted-foreground);
+          color: var(--muted-foreground);
         }
         .pretui-trace-label {
-          font-weight: 500;
+          font-weight: 600;
         }
         /* Law 5: the sweep says "still going" and nothing else animates */
         .pretui-trace-label[data-shimmer] {
@@ -304,10 +273,8 @@ export class Thinking extends Component<ThinkingSignature> {
           }
         }
         .pretui-trace-chev {
-          width: 14px;
-          height: 14px;
           flex: none;
-          color: var(--ink-3, var(--boxel-400));
+          color: var(--subtle-foreground);
           transition: transform 300ms
             var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
         }
@@ -316,79 +283,81 @@ export class Thinking extends Component<ThinkingSignature> {
         }
         .pretui-trace-rail {
           position: relative;
-          margin: 6px 0 0 5px;
-          padding-left: 16px;
+          margin: var(--boxel-sp-3xs) 0 0 var(--boxel-sp-3xs);
+          padding-left: var(--boxel-sp);
           display: flex;
           flex-direction: column;
-          gap: 2px;
+          gap: var(--boxel-sp-6xs);
         }
         .pretui-trace-rail::before {
           content: '';
           position: absolute;
-          left: 3px;
-          top: 4px;
-          bottom: 6px;
+          left: var(--boxel-sp-5xs);
+          top: var(--boxel-sp-4xs);
+          bottom: var(--boxel-sp-3xs);
           width: 1px;
-          background: var(--border);
+          background-color: var(--border);
         }
         .pretui-trace-row {
           display: flex;
           align-items: center;
-          gap: 8px;
-          min-height: 26px;
-          padding: 2px 6px;
-          border-radius: 6px;
+          gap: var(--boxel-sp-xs);
+          min-height: 1.625rem;
+          padding: var(--boxel-sp-6xs) var(--boxel-sp-xs);
+          border-radius: var(--boxel-border-radius-sm);
           color: var(--foreground);
         }
         .pretui-trace-row:hover {
-          background: var(--hover, var(--boxel-100));
+          background-color: var(--hover);
         }
         .pretui-trace-row[data-kind='query'] {
           color: var(--muted-foreground);
         }
         .pretui-trace-row > svg {
-          width: 13px;
-          height: 13px;
           flex: none;
         }
         .pretui-trace-check {
-          color: var(--ink-3, var(--boxel-400));
+          color: var(--subtle-foreground);
         }
         .pretui-trace-primary {
           min-width: 0;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          font-weight: 500;
+          font-weight: 400;
         }
         .pretui-trace-primary[data-wrap] {
           white-space: normal;
-          font-weight: 400;
-          line-height: 1.55;
           color: var(--muted-foreground);
         }
         .pretui-trace-sec {
           margin-left: auto;
           flex: none;
-          font-size: var(--text-ui-sm, 11.5px);
-          color: var(--ink-3, var(--boxel-400));
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          font-variant-numeric: tabular-nums;
+          color: var(--subtle-foreground);
         }
+        /* a machine value is a pasteable string: mono at the data size */
         .pretui-trace-sec[data-mono] {
           font-family: var(--font-mono);
+          font-size: var(--boxel-font-size-xs);
+          line-height: var(--boxel-line-height-xs);
         }
+        /* the counts are figures, not strings to paste: sans, tabular */
         .pretui-trace-diff {
           flex: none;
           display: inline-flex;
-          gap: 6px;
-          font-family: var(--font-mono);
-          font-size: 11px;
+          gap: var(--boxel-sp-4xs);
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
           font-variant-numeric: tabular-nums;
         }
         .pretui-trace-add {
-          color: var(--success, var(--boxel-success));
+          color: var(--success-ink);
         }
         .pretui-trace-del {
-          color: var(--pretui-destructive-ink, var(--boxel-danger));
+          color: var(--destructive-ink);
         }
         /* the stagger is a precomputed delay, retriggered by the open flip.
            The flag lives on the rail, not on Collapse's own element: a
@@ -403,7 +372,7 @@ export class Thinking extends Component<ThinkingSignature> {
         @keyframes pretui-trace-in {
           from {
             opacity: 0;
-            transform: translateY(4px);
+            transform: translateY(var(--boxel-sp-4xs));
           }
           to {
             opacity: 1;
@@ -413,7 +382,7 @@ export class Thinking extends Component<ThinkingSignature> {
         @media (prefers-reduced-motion: reduce) {
           .pretui-trace-label[data-shimmer] {
             animation: none;
-            background: none;
+            background-image: none;
             -webkit-background-clip: border-box;
             background-clip: border-box;
             color: var(--foreground);