@artooi/agents-web-components 0.0.0-stage → 0.1.1

package/src/ui/history/history_styles.ts

@@ -0,0 +1,492 @@
+// The thread drawer, its list and filter, and the checkpoint menu. The
+// queued-message row over the composer sits among them only because no rule
+// moved in the split.
+export const HISTORY_STYLES: string = `
+/* Chat-history drawer — a slide-over within the chat panel.
+   The hidden attribute stays the single source of truth for open/closed (no
+   JS-driven animation state): display is transitioned discretely, so on close
+   the drawer stays displayed for the whole exit and is removed only at the end,
+   which is what lets the backdrop fade and the panel slide out. */
+.drawer {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  /* Visible at once on the way in. Opening moves focus to the list in the
+     same task that unhides it, and an element still hidden cannot take focus:
+     a transition on visibility starts at its first value, so easing it in
+     left the drawer hidden at exactly that instant and the focus call was
+     dropped at every placement. Reduced motion shortens the transition
+     without removing it, so it had the same first frame. */
+  transition: visibility 0s;
+}
+
+/* Closed. The overlay keeps its box (display, not none) so the backdrop and
+   panel inside it stay rendered and can transition both ways; visibility is
+   what takes the whole subtree out of the tab order, the a11y tree and hit
+   testing at rest. On the way out it is delayed rather than eased, so it
+   flips only once the slide has finished. A transition is read from the
+   state being entered, which is what lets the two directions differ. */
+.drawer[hidden] {
+  display: flex;
+  visibility: hidden;
+  pointer-events: none;
+  transition: visibility 0s var(--_motion);
+}
+
+.drawer[hidden] .drawer-backdrop {
+  opacity: 0;
+}
+
+.drawer[hidden] .drawer-panel {
+  transform: translateX(-100%);
+}
+
+.checkpoints {
+  position: absolute;
+  inset-block-start: 3rem;
+  inset-inline: 0.75rem;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border: 1px solid var(--_border);
+  border-radius: 0.5rem;
+  background: var(--_assistant-bg);
+  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
+  max-height: 60%;
+  overflow-y: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
+  transform-origin: top center;
+  /* Visibility flips at once on the way in, for the drawer's reason: opening
+     focuses the panel in the same task that unhides it, and an element still
+     hidden cannot take focus. The fade and the scale still ease in. */
+  transition:
+    opacity var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease),
+    visibility 0s;
+}
+
+/* Same idiom as the drawer: laid out at rest, hidden by visibility, so the
+   popover can animate open and closed. The whole list is restated because a
+   transition is read from the state being entered; only visibility differs,
+   delayed rather than eased so it flips once the exit has played. */
+.checkpoints[hidden] {
+  display: flex;
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.96) translateY(-6px);
+  transition:
+    opacity var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease),
+    visibility 0s var(--_motion);
+}
+
+.checkpoints-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  opacity: 0.7;
+}
+
+.checkpoints-empty {
+  padding: 0.5rem 0.25rem;
+  font-size: 0.8125rem;
+  opacity: 0.7;
+}
+
+/* A row is a label and two buttons, and nothing about the row itself is
+   pressable. Hover is the affordance of something clickable, and a lit-up row made the
+   buttons look like decoration on a clickable strip, so the resting surface
+   groups the row and only the buttons respond to hover.
+
+   It wraps for the same reason the tool-call head does. Every child but the label
+   is fixed-width, so in a narrow panel the label is the only thing that can give
+   -- and a flex-basis of zero lets it give everything. Adding the run id was
+   enough to crush "just now" to zero pixels: present, correct, and invisible.
+   Wrapping puts the buttons on their own line instead. */
+.checkpoint-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3125rem 0.4375rem;
+  border-radius: 0.375rem;
+  background: var(--_hover);
+}
+
+/* Grows into spare room, and refuses to shrink past the shortest thing it ever
+   says. A time is short and bounded, so there is no case for eliding it. */
+.checkpoint-label {
+  flex: 1 1 auto;
+  min-width: 7ch;
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* When the label holds the run's first message, the time moves here: still worth
+   showing, no longer what identifies the row. Muted and unshrinkable, so it does
+   not compete with the words beside it. */
+.checkpoint-time {
+  flex: 0 0 auto;
+  font-size: 0.6875rem;
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
+/* Enough of the run id to tell two runs apart when both say "just now". Muted
+   and monospaced: it is a reference, not a name. */
+.checkpoint-id {
+  flex: 0 0 auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.6875rem;
+  opacity: 0.55;
+}
+
+/* On the panel's own surface, not the row's: the row now paints the hover token
+   itself, and a badge the same colour as what it sits on is not a badge. */
+.checkpoint-branch {
+  font-size: 0.6875rem;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(--_assistant-bg);
+  opacity: 0.8;
+}
+
+/* The two things in the row that actually do something, so they are the two
+   things that look like it: a filled surface at rest rather than a transparent
+   outline, which on top of the old row highlight was nearly invisible. */
+.checkpoint-action {
+  font: inherit;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  cursor: pointer;
+  padding: 0.1875rem 0.5625rem;
+  border: 1px solid var(--_border);
+  border-radius: 0.375rem;
+  background: var(--_bg);
+  color: inherit;
+  transition:
+    background var(--_motion) var(--_ease),
+    border-color var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease);
+}
+
+/* Resume is what a reader wants nine times in ten; fork is the deliberate choice
+   beside it. Filled and outlined, the same pair the confirmation and approval
+   cards already use for their primary and secondary action. */
+.checkpoint-resume {
+  font-weight: 600;
+  border-color: var(--_accent);
+  background: var(--_accent);
+  color: var(--_on-accent);
+}
+
+.checkpoint-fork:hover {
+  background: var(--_hover);
+  border-color: var(--_accent);
+}
+
+/* The filled one cannot go lighter on hover without losing its contrast with the
+   white label, so it dims instead. */
+.checkpoint-resume:hover {
+  opacity: 0.88;
+}
+
+/* Pressed: a pixel down, so the click is felt as well as seen. */
+.checkpoint-action:active {
+  transform: translateY(1px);
+}
+
+/* Keyboard focus was invisible here, in a panel that traps focus and is reached
+   by Tab -- so the one navigation path guaranteed to land on these buttons was
+   the one with nothing to show for it. */
+.checkpoint-action:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
+}
+
+.drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(20, 20, 50, 0.32);
+  opacity: 1;
+  transition: opacity var(--_motion) var(--_ease);
+}
+
+.drawer-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(300px, 85%);
+  height: 100%;
+  background: var(--_bg);
+  border-right: 1px solid var(--_border);
+  box-shadow: var(--_shadow);
+  overflow: hidden;
+  transform: none;
+  transition: transform var(--_motion) var(--_ease);
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--_space);
+  padding: var(--_pad);
+  border-bottom: 1px solid var(--_border);
+}
+
+.drawer-title {
+  /* Takes the slack so the two controls group at the trailing edge. With
+     space-between and three items the middle one floats, which reads as the
+     title and the close button being a pair with New chat wedged between
+     them. Truncates rather than pushing them off the row. */
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.drawer-new {
+  flex: 0 0 auto;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  background: var(--_bg);
+  color: var(--_accent);
+  padding: 4px 10px;
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+}
+
+/* Narrows the list. Sits under the header rather than in it: the header's two
+   controls act on the conversation, and a field that filters what is below it
+   belongs with what it filters. */
+/* What is waiting for the run to finish. Above the composer, beside the
+   attachment tray, because both are things already handed over and not yet
+   sent. Each chip is a button: pressing it takes that message back. */
+.queued {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--_space);
+  padding: 0 var(--_pad) var(--_space);
+}
+
+/* Empty whenever no run is in flight, and hidden then. Same reason as the
+   palette: the display above would otherwise keep the bottom padding as dead
+   space over the composer. */
+.queued[hidden] {
+  display: none;
+}
+
+.queued-chip {
+  max-width: 100%;
+  overflow: hidden;
+  padding: 4px 10px;
+  border: 1px dashed var(--_border);
+  border-radius: var(--_msg-radius);
+  background: var(--_bg);
+  color: var(--_muted);
+  font: inherit;
+  font-size: 0.9em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.queued-chip:hover {
+  border-style: solid;
+  color: var(--_fg);
+}
+
+.drawer-filter {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: calc(100% - var(--_pad) * 2);
+  margin: var(--_space) var(--_pad) 0;
+  padding: 6px 10px;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  background: var(--_input-bg);
+  color: var(--_fg);
+  font: inherit;
+  font-size: 0.9em;
+}
+
+.drawer-filter::placeholder {
+  color: var(--_muted);
+}
+
+.drawer-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
+}
+
+.drawer-empty {
+  padding: var(--_pad);
+  font-size: 0.9em;
+  color: var(--_muted);
+}
+
+/* An age group's heading: quieter than the rows it heads, and not a stop for Tab. */
+.drawer-group-label {
+  padding: 0.75rem var(--_pad) 0.25rem;
+  border-bottom: 1px solid var(--_border);
+  font-size: 0.75em;
+  font-weight: 600;
+  color: var(--_muted);
+}
+
+.drawer-row {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid var(--_border);
+}
+
+.drawer-row--active {
+  background: var(--_assistant-bg);
+}
+
+.drawer-row-select {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.drawer-row-title {
+  font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.drawer-row-time {
+  font-size: 0.72em;
+  color: var(--_muted);
+}
+
+.drawer-row-preview {
+  font-size: 0.8em;
+  color: var(--_muted);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.drawer-row-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 6px;
+}
+
+.drawer-row-rename,
+.drawer-row-delete {
+  border: none;
+  background: none;
+  color: var(--_muted);
+  font-size: 0.9em;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.drawer-rename-input {
+  flex: 1;
+  min-width: 0;
+  margin: 6px 10px;
+  padding: 4px 8px;
+  border: 1px solid var(--_accent);
+  border-radius: 6px;
+  background: var(--_input-bg);
+  color: var(--_fg);
+  font: inherit;
+}
+
+.drawer-confirm {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 0.85em;
+}
+
+.drawer-confirm-label {
+  color: var(--_danger);
+}
+
+.drawer-confirm-yes {
+  border: none;
+  border-radius: 6px;
+  background: var(--_danger);
+  color: var(--_on-danger);
+  padding: 3px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.drawer-confirm-no {
+  border: 1px solid var(--_border);
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  padding: 3px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Embedded placement: an inline, flush side panel rather than a dimmed,
+   floating slide-over. */
+:host([placement="embedded"]) .drawer-backdrop {
+  background: none;
+}
+
+/* The way back out of the list. It sits beside New chat, which is the control
+   it must not be mistaken for: one returns you to the conversation you were
+   reading, the other replaces it. */
+.drawer-close {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.drawer-close:hover {
+  background: var(--_hover);
+}
+
+:host([placement="embedded"]) .drawer-panel {
+  width: 100%;
+  border-right: none;
+  box-shadow: none;
+}
+`;

package/src/ui/history/relative_time.ts

@@ -0,0 +1,50 @@
+import { fillUiString } from "../fill_ui_string.js";
+import { DEFAULT_UI_STRINGS, type UiStrings } from "../ui_strings.js";
+
+/**
+ * A compact relative timestamp for a thread row — e.g. `"just now"`, `"5m ago"`,
+ * `"3h ago"`, `"2d ago"`, `"4w ago"`.
+ *
+ * `now` is injectable so callers and tests can pin the reference point. A
+ * future timestamp (clock skew) and a non-finite one (an unparseable or missing
+ * `updated_at`, arriving as `NaN`) both read as `justNow`, rather than
+ * rendering a nonsense age. Unit words come from {@link UiStrings} with `{n}`
+ * filled in here; the bucketing stays integer-rounded and locale-neutral.
+ */
+export function relativeTime(
+  timestamp: number,
+  now: number = Date.now(),
+  strings: UiStrings = DEFAULT_UI_STRINGS,
+): string {
+  if (!Number.isFinite(timestamp)) {
+    return strings.justNow;
+  }
+  const seconds = Math.round((now - timestamp) / 1000);
+  if (seconds < 60) {
+    return strings.justNow;
+  }
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) {
+    return fillUiString(strings.minutesAgo, { n: minutes });
+  }
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) {
+    return fillUiString(strings.hoursAgo, { n: hours });
+  }
+  const days = Math.round(hours / 24);
+  if (days < 7) {
+    return fillUiString(strings.daysAgo, { n: days });
+  }
+  return fillUiString(strings.weeksAgo, { n: Math.round(days / 7) });
+}
+
+/**
+ * A host's replacement for {@link relativeTime}.
+ *
+ * Takes an epoch-milliseconds timestamp and returns the text a row shows.
+ * `Intl.RelativeTimeFormat` is the obvious implementation and is deliberately
+ * *not* the default: a component that guessed a locale would disagree with the
+ * host page's own formatting, and being wrong in a second language is worse
+ * than being neutral in one.
+ */
+export type RelativeTimeFormatter = (timestamp: number) => string;