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

package/bundled-realms/pretui/components/tool-icon.ts

@@ -0,0 +1,64 @@
+// Pretui — toolIcon: the icon a tool call is drawn with, from boxel-icons, by the tool's name or verb.
+import type { ComponentLike } from '@glint/template';
+import BookOpen from '@cardstack/boxel-icons/book-open';
+import Brain from '@cardstack/boxel-icons/brain';
+import Code from '@cardstack/boxel-icons/code';
+import Copy from '@cardstack/boxel-icons/copy';
+import Database from '@cardstack/boxel-icons/database';
+import Download from '@cardstack/boxel-icons/download';
+import FileText from '@cardstack/boxel-icons/file-text';
+import Globe from '@cardstack/boxel-icons/globe';
+import HelpCircle from '@cardstack/boxel-icons/help-circle';
+import ListChecks from '@cardstack/boxel-icons/list-checks';
+import Pencil from '@cardstack/boxel-icons/pencil';
+import Photo from '@cardstack/boxel-icons/photo';
+import Search from '@cardstack/boxel-icons/search';
+import ShieldCheck from '@cardstack/boxel-icons/shield-check';
+import Sparkles from '@cardstack/boxel-icons/sparkles';
+import Telescope from '@cardstack/boxel-icons/telescope';
+import Terminal from '@cardstack/boxel-icons/terminal';
+import Trash from '@cardstack/boxel-icons/trash-2';
+import Upload from '@cardstack/boxel-icons/upload';
+import Wrench from '@cardstack/boxel-icons/wrench';
+
+export type ToolIcon = ComponentLike<{ Element: SVGSVGElement }>;
+
+// Words in a tool's name or verb, first match wins: the more particular
+// kinds before the general ones ('web-search' is a search, 'readUrl' a web
+// read, 'read' a file)
+const KINDS: [RegExp, ToolIcon][] = [
+  [new RegExp('research|investigat', 'i'), Telescope as ToolIcon],
+  [new RegExp('url|web|fetch|browse|http', 'i'), Globe as ToolIcon],
+  [new RegExp('search|find|query|grep|glob|lookup', 'i'), Search as ToolIcon],
+  [new RegExp('check|lint|test|verify|correct|validat', 'i'), ShieldCheck as ToolIcon],
+  [new RegExp('delete|remove|trash|drop', 'i'), Trash as ToolIcon],
+  [new RegExp('copy|duplicat|clone', 'i'), Copy as ToolIcon],
+  [new RegExp('edit|write|patch|update|replace|mark|set|rename', 'i'), Pencil as ToolIcon],
+  [new RegExp('script|run-realm-code|code|eval|exec', 'i'), Code as ToolIcon],
+  [new RegExp('shell|bash|terminal|command', 'i'), Terminal as ToolIcon],
+  [new RegExp('skill|read-realm|doc|guide|learn', 'i'), BookOpen as ToolIcon],
+  [new RegExp('read|open|view|load|file', 'i'), FileText as ToolIcon],
+  [new RegExp('upload|attach|send|publish|ship', 'i'), Upload as ToolIcon],
+  [new RegExp('download|export|save', 'i'), Download as ToolIcon],
+  [new RegExp('image|photo|picture|draw', 'i'), Photo as ToolIcon],
+  [new RegExp('generat|create|make|compose|draft', 'i'), Sparkles as ToolIcon],
+  [new RegExp('index|database|table|record', 'i'), Database as ToolIcon],
+  [new RegExp('plan|todo|task|step', 'i'), ListChecks as ToolIcon],
+  [new RegExp('ask|question|choose|pick', 'i'), HelpCircle as ToolIcon],
+  [new RegExp('think|reason|reflect', 'i'), Brain as ToolIcon],
+];
+
+/** the icon for a tool, by its name first, then its verb; a wrench for a
+ * tool nothing names */
+export function toolIcon(name?: string, verb?: string): ToolIcon {
+  for (let word of [name, verb]) {
+    if (!word) {
+      continue;
+    }
+    let hit = KINDS.find(([re]) => re.test(word));
+    if (hit) {
+      return hit[1];
+    }
+  }
+  return Wrench as ToolIcon;
+}

package/bundled-realms/pretui/components/tool-meta.gts

@@ -0,0 +1,82 @@
+// Pretui — ToolMeta: the call's particulars (tool · profile · elapsed · cost), quiet until asked for.
+import Component from '@glimmer/component';
+
+export interface ToolMetaSignature {
+  Args: {
+    /** the particulars, in reading order: 'run-realm-code', 'ctse',
+     * '1m 32s', '18 credits'. Empty entries are dropped */
+    items: (string | undefined)[];
+    /** 'hover' (default): shown while the pointer or focus is in the row
+     * that holds it, and always on a touch screen; 'always': shown */
+    reveal?: 'hover' | 'always';
+  };
+  Element: HTMLDivElement;
+}
+
+/**
+ * A sans caption line of particulars for the reader who wants them. It stays in
+ * the accessibility tree while hidden (it fades, it is not removed), so a
+ * screen reader reads it with the row.
+ *
+ * ```hbs
+ * <ToolRow …><:rows>…<ToolMeta @items={{array 'run-realm-code' 'ctse' '42s' '6 credits'}} /></:rows></ToolRow>
+ * ```
+ */
+export class ToolMeta extends Component<ToolMetaSignature> {
+  get items(): string[] {
+    return this.args.items.filter((item): item is string => Boolean(item));
+  }
+  <template>
+    <div
+      class='pretui-toolmeta'
+      data-reveal={{if @reveal @reveal 'hover'}}
+      data-test-pretui-tool-meta
+      ...attributes
+    >
+      {{#each this.items as |item index|}}{{#if index}}<span
+            class='pretui-toolmeta-sep'
+            aria-hidden='true'
+          > · </span>{{/if}}<span>{{item}}</span>{{/each}}
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-toolmeta {
+          padding-inline-start: calc(
+            var(--pretui-toolrow-disc, var(--boxel-sp)) +
+              var(--pretui-toolrow-gap, var(--boxel-sp-xs))
+          );
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          color: var(--subtle-foreground);
+          font-variant-numeric: tabular-nums;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          transition: opacity 160ms
+            var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
+        }
+        @media (hover: hover) {
+          .pretui-toolmeta[data-reveal='hover'] {
+            opacity: 0;
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-toolmeta {
+            transition: none;
+          }
+        }
+      }
+      /* revealed by the row that holds it: a rule about another
+         component's element, so the whole selector is global, and every
+         part of it is a Pret UI name */
+      @layer PretComponent {
+        :global(.pretui-toolrow:hover .pretui-toolmeta[data-reveal='hover']),
+        :global(
+          .pretui-toolrow:focus-within .pretui-toolmeta[data-reveal='hover']
+        ) {
+          opacity: 1;
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/tool-plan.gts

@@ -0,0 +1,197 @@
+// Pretui — ToolPlan: a run's plan as a checklist that ticks, on ToolRow's grid.
+import Component from '@glimmer/component';
+import { PlanMark } from './plan-mark';
+
+export type ToolPlanStepState =
+  | 'done'
+  | 'current'
+  | 'next'
+  | 'failed'
+  | 'skipped';
+
+export interface ToolPlanStep {
+  label: string;
+  state: ToolPlanStepState;
+  /** a quieter note after the label: "3 of 5", "kept 4" */
+  note?: string;
+  /** what the step did, one small line each under its label: "3 results
+   * for running clubs Manhattan" */
+  details?: string[];
+}
+
+export interface ToolPlanSignature {
+  Args: {
+    steps: ToolPlanStep[];
+    /** the list's accessible name. Default 'Plan' */
+    label?: string;
+    /** 'compact' (default) sits in a ToolRow's disc column;
+     * 'comfortable' is a checklist read on its own, as TaskChecklist shows it */
+    density?: 'compact' | 'comfortable';
+  };
+  Element: HTMLOListElement;
+}
+
+const SPOKEN: Record<ToolPlanStepState, string> = {
+  done: 'done',
+  current: 'in progress',
+  next: 'not started',
+  failed: 'failed',
+  skipped: 'skipped',
+};
+
+/**
+ * The steps a run means to take, shown before it takes them, so the reader
+ * sees how far it is and what comes next:
+ *
+ * ```hbs
+ * <ToolRow @name='research' @state='running' @framed={{true}}>
+ *   <:rows><ToolPlan @steps={{this.steps}} /></:rows>
+ * </ToolRow>
+ * ```
+ */
+export class ToolPlan extends Component<ToolPlanSignature> {
+  spoken = (state: ToolPlanStepState) => SPOKEN[state];
+  get markSize(): number {
+    return this.args.density === 'comfortable' ? 16 : 14;
+  }
+  isCurrent = (state: ToolPlanStepState) =>
+    state === 'current' ? 'step' : undefined;
+  <template>
+    <ol
+      class='pretui-toolplan'
+      data-density={{if @density @density 'compact'}}
+      aria-label={{if @label @label 'Plan'}}
+      data-test-pretui-tool-plan
+      ...attributes
+    >
+      {{! keyed by label: a caller that rebuilds its steps (a clock, a
+          poll) keeps each row, so a running ring keeps turning }}
+      {{#each @steps key='label' as |step|}}
+        <li
+          class='pretui-toolplan-step'
+          data-scroll-anchor
+          data-state={{step.state}}
+          aria-current={{this.isCurrent step.state}}
+          data-test-pretui-tool-plan-step={{step.state}}
+        >
+          <PlanMark
+            class='pretui-toolplan-glyph'
+            @state={{step.state}}
+            @size={{this.markSize}}
+          />
+          <span class='pretui-toolplan-label'>
+            {{step.label}}
+            <span class='pretui-toolplan-spoken'>,
+              {{this.spoken step.state}}</span>
+            {{#if step.note}}<span
+                class='pretui-toolplan-note'
+              >{{step.note}}</span>{{/if}}
+          </span>
+          {{#if step.details.length}}
+            <ul class='pretui-toolplan-details'>
+              {{#each step.details as |detail|}}
+                <li class='pretui-toolplan-detail'>{{detail}}</li>
+              {{/each}}
+            </ul>
+          {{/if}}
+        </li>
+      {{/each}}
+    </ol>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-toolplan {
+          display: grid;
+          gap: 1px;
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+        /* ToolLine's grid: the glyph in the disc column, the words on the
+           row's text edge */
+        .pretui-toolplan-step {
+          display: grid;
+          grid-template-columns: var(--pretui-toolrow-disc, var(--boxel-sp)) minmax(
+              0,
+              1fr
+            );
+          column-gap: var(--pretui-toolrow-gap, var(--boxel-sp-xs));
+          align-items: center;
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
+          color: var(--pretui-toolrow-settled-ink, var(--foreground));
+        }
+        .pretui-toolplan-glyph {
+          justify-self: center;
+          align-self: center;
+        }
+        /* done steps step back; the step under way and what is left keep
+           the ink, so the eye lands on the work still to do */
+        .pretui-toolplan-step[data-state='done'] {
+          color: var(--muted-foreground);
+        }
+        .pretui-toolplan-step[data-state='current'] {
+          color: var(--foreground);
+        }
+        .pretui-toolplan-step[data-state='next'] {
+          color: var(--foreground);
+        }
+        .pretui-toolplan-step[data-state='skipped'] {
+          color: var(--subtle-foreground);
+        }
+        .pretui-toolplan-step[data-state='skipped'] .pretui-toolplan-label {
+          text-decoration: line-through;
+        }
+        /* a failed step keeps ink-1: its mark carries the state */
+        .pretui-toolplan-step[data-state='failed'] {
+          color: var(--foreground);
+        }
+        .pretui-toolplan[data-density='comfortable'] {
+          gap: var(--boxel-sp-xs);
+        }
+        .pretui-toolplan[data-density='comfortable'] .pretui-toolplan-step {
+          grid-template-columns: var(--boxel-sp) minmax(0, 1fr);
+          column-gap: var(--boxel-sp-xs);
+          align-items: center;
+        }
+        .pretui-toolplan-label {
+          min-width: 0;
+          overflow-wrap: anywhere;
+        }
+        .pretui-toolplan-note {
+          margin-inline-start: var(--boxel-sp-xs);
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          font-weight: 400;
+          font-variant-numeric: tabular-nums;
+          color: var(--subtle-foreground);
+        }
+        /* what a step did sits under its words, smaller and quieter: it
+           belongs to the step, it is not a step of its own */
+        .pretui-toolplan-details {
+          grid-column: 2;
+          display: grid;
+          gap: var(--boxel-sp-6xs);
+          margin: var(--boxel-sp-6xs) 0 var(--boxel-sp-4xs);
+          padding: 0;
+          list-style: none;
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          color: var(--subtle-foreground);
+        }
+        .pretui-toolplan-detail {
+          min-width: 0;
+          overflow-wrap: anywhere;
+        }
+        /* the state in words, for a reader who does not see the glyph */
+        .pretui-toolplan-spoken {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+          white-space: nowrap;
+        }
+      }
+    </style>
+  </template>
+}