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

package/bundled-realms/pretui/components/compaction-chip.gts

@@ -1,5 +1,8 @@
 // Pretui — CompactionChip: a marker that earlier context was compacted, expandable to what was kept.
 import Component from '@glimmer/component';
+import ChevronDownIcon from '@cardstack/boxel-icons/chevron-down';
+import ListFilterIcon from '@cardstack/boxel-icons/list-filter';
+import XIcon from '@cardstack/boxel-icons/x';
 import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { guidFor } from '@ember/object/internals';
@@ -18,12 +21,15 @@ import { Collapse } from '../internal/agentic-chat';
 
 export interface CompactionChipSignature {
   Args: {
-    /** 'running' while compacting, 'done' once the summary exists */
-    state?: 'running' | 'done';
+    /** 'running' while compacting, 'done' once the summary exists,
+     * 'failed' when it could not be made (the history is kept as it was) */
+    state?: 'running' | 'done' | 'failed';
     /** label while running (default 'Compacting long history') */
     runningLabel?: string;
     /** label once settled (default 'History compacted') */
     doneLabel?: string;
+    /** label when it failed (default 'Could not compact history') */
+    failedLabel?: string;
     /** how many messages were condensed */
     messageCount?: number;
     /** how many tool calls were condensed */
@@ -49,16 +55,23 @@ export class CompactionChip extends Component<CompactionChipSignature> {
 
   private panelId = guidFor(this) + '-summary';
 
-  get state(): 'running' | 'done' {
+  get state(): 'running' | 'done' | 'failed' {
     return this.args.state ?? 'done';
   }
   get running(): boolean {
     return this.state === 'running';
   }
+  get failed(): boolean {
+    return this.state === 'failed';
+  }
   get label(): string {
-    return this.running
-      ? (this.args.runningLabel ?? 'Compacting long history')
-      : (this.args.doneLabel ?? 'History compacted');
+    if (this.running) {
+      return this.args.runningLabel ?? 'Compacting long history';
+    }
+    if (this.failed) {
+      return this.args.failedLabel ?? 'Could not compact history';
+    }
+    return this.args.doneLabel ?? 'History compacted';
   }
   /** the condensed-counts line, assembled as text so it reads in greyscale */
   get counts(): string | undefined {
@@ -74,11 +87,14 @@ export class CompactionChip extends Component<CompactionChipSignature> {
     return parts.length ? parts.join(' · ') + ' condensed' : undefined;
   }
   get expandable(): boolean {
-    return !this.running;
+    return this.state === 'done';
   }
   get expanded(): boolean {
     return (
-      this.args.expanded ?? this.innerExpanded ?? this.args.defaultExpanded ?? false
+      this.args.expanded ??
+      this.innerExpanded ??
+      this.args.defaultExpanded ??
+      false
     );
   }
 
@@ -108,38 +124,31 @@ export class CompactionChip extends Component<CompactionChipSignature> {
             data-test-pretui-compaction-toggle
             {{on 'click' this.toggle}}
           >
-            <svg viewBox='0 0 24 24' aria-hidden='true' focusable='false'>
-              <path
-                d='M4 8h16M7 12h10M10 16h4'
-                fill='none'
-                stroke='currentColor'
-                stroke-width='2'
-                stroke-linecap='round'
-              />
-            </svg>
+            <ListFilterIcon width='13' height='13' aria-hidden='true' />
             <span class='pretui-compaction-label'>{{this.label}}</span>
             {{#if this.counts}}
               <span class='pretui-compaction-counts'>{{this.counts}}</span>
             {{/if}}
-            <svg
+            <ChevronDownIcon
               class='pretui-compaction-chev'
-              viewBox='0 0 24 24'
+              width='13'
+              height='13'
               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>
         {{else}}
           <span class='pretui-compaction-chip' role='status'>
-            <Spinner @size={{11}} />
+            {{#if this.failed}}
+              <XIcon
+                class='pretui-compaction-failed'
+                width='13'
+                height='13'
+                aria-hidden='true'
+                data-test-pretui-compaction-failed-mark
+              />
+            {{else}}
+              <Spinner @size={{11}} />
+            {{/if}}
             <span class='pretui-compaction-label'>{{this.label}}</span>
           </span>
         {{/if}}
@@ -167,44 +176,55 @@ export class CompactionChip extends Component<CompactionChipSignature> {
         .pretui-compaction {
           display: flex;
           flex-direction: column;
-          gap: 4px;
-          font-size: var(--text-ui-sm, 11.5px);
+          gap: var(--boxel-sp-4xs);
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
         }
         .pretui-compaction-marker {
           display: flex;
           align-items: center;
-          gap: 10px;
+          gap: var(--boxel-sp-xs);
+        }
+        /* a failure colours its mark, not its words. The mark's rule names
+           the chip as well, so it outranks the quiet colour every icon in
+           the chip takes below */
+        .pretui-compaction[data-state='failed'] .pretui-compaction-chip {
+          color: var(--foreground);
+        }
+        .pretui-compaction-chip > .pretui-compaction-failed {
+          color: var(--destructive-ink);
         }
         .pretui-compaction-rule {
           flex: 1;
           height: 1px;
-          min-width: 12px;
-          background: var(--border);
+          min-width: var(--boxel-sp-sm);
+          background-color: var(--border);
         }
         .pretui-compaction-chip {
           display: inline-flex;
           align-items: center;
-          gap: 7px;
-          min-height: 26px;
-          padding: 0 10px;
+          gap: var(--boxel-sp-xs);
+          min-height: 1.625rem;
+          padding: 0 var(--boxel-sp-sm);
           border: 0;
-          border-radius: 999px;
-          background: var(--inset, var(--boxel-100));
-          box-shadow: var(
-            --pretui-shadow-hairline,
-            0 0 0 1px var(--border)
-          );
-          font: inherit;
-          font-size: var(--text-ui-sm, 11.5px);
+          border-radius: var(--boxel-border-radius-sm);
+          background-color: var(--inset);
+          box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
+          font-family: inherit;
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
           color: var(--muted-foreground);
-          flex: none;
+          /* shrinks between its rules, so a narrow panel truncates the
+             label instead of pushing the chip past the edge */
+          flex: 0 1 auto;
+          min-width: 0;
           max-width: 100%;
         }
         button.pretui-compaction-chip {
           cursor: pointer;
         }
         button.pretui-compaction-chip:hover {
-          background: var(--hover, var(--boxel-100));
+          background-color: var(--hover);
           color: var(--foreground);
         }
         button.pretui-compaction-chip:focus-visible {
@@ -212,13 +232,11 @@ export class CompactionChip extends Component<CompactionChipSignature> {
           outline-offset: 2px;
         }
         .pretui-compaction-chip > svg {
-          width: 13px;
-          height: 13px;
           flex: none;
-          color: var(--ink-3, var(--boxel-400));
+          color: var(--subtle-foreground);
         }
         .pretui-compaction-label {
-          font-weight: 500;
+          font-weight: 400;
           min-width: 0;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -226,7 +244,7 @@ export class CompactionChip extends Component<CompactionChipSignature> {
         }
         .pretui-compaction-counts {
           flex: none;
-          color: var(--ink-3, var(--boxel-400));
+          color: var(--subtle-foreground);
           font-variant-numeric: tabular-nums;
         }
         .pretui-compaction-chev {
@@ -237,23 +255,19 @@ export class CompactionChip extends Component<CompactionChipSignature> {
           transform: rotate(180deg);
         }
         .pretui-compaction-summary {
-          margin: 4px auto 0;
-          max-width: 62ch;
-          padding: 9px 12px;
-          border-radius: 10px;
-          background: var(--inset, var(--boxel-100));
-          box-shadow: var(
-            --pretui-shadow-hairline,
-            0 0 0 1px var(--border)
-          );
+          margin: var(--boxel-sp-4xs) auto 0;
+          max-inline-size: 68ch;
+          padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
+          border-radius: var(--boxel-border-radius-sm);
+          background-color: var(--inset);
+          box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
           color: var(--muted-foreground);
-          line-height: 1.6;
         }
         .pretui-compaction-summary p {
           margin: 0;
         }
         .pretui-compaction-none {
-          color: var(--ink-3, var(--boxel-400));
+          color: var(--subtle-foreground);
           font-style: italic;
         }
         @media (prefers-reduced-motion: reduce) {
@@ -263,8 +277,8 @@ export class CompactionChip extends Component<CompactionChipSignature> {
         }
         @media (any-pointer: coarse) {
           button.pretui-compaction-chip {
-            min-height: 44px;
-            padding: 0 16px;
+            min-height: 2.75rem;
+            padding: 0 var(--boxel-sp);
           }
         }
       }