@artooi/ag-ui-web-component 0.44.0 → 0.46.0

package/src/ui/composer/skill_styles.ts

@@ -0,0 +1,120 @@
+// Skills and suggestions over the composer: the chip rows and the / palette.
+export const SKILL_STYLES: string = `
+/* Skills — chips row + the /-command palette, above the input. */
+.skill-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 10px 12px;
+}
+
+/* The row is hidden whenever the host offers no skills, which is most elements
+   most of the time, and an author display beats the user-agent rule for the
+   hidden attribute. Without this it kept its padding: 20px of panel between
+   the transcript and the composer, under every placement, reading as the gap
+   under whatever the transcript ends with. */
+.skill-chips[hidden] {
+  display: none;
+}
+
+.skill-chip {
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font: inherit;
+  font-size: 0.9em;
+  cursor: pointer;
+  background: var(--_assistant-bg);
+  color: var(--_fg);
+}
+
+.skill-chip:hover {
+  border-color: var(--_accent);
+}
+
+/* Follow-up suggestion chips. Deliberately the skill chips' shape rather than a
+   second chip vocabulary -- both are "a question you could ask", and the only
+   difference is who chose it. Inside the transcript, so they scroll with the
+   answer they follow instead of hovering above the composer. */
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-self: stretch;
+}
+
+.suggestion-chip {
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font: inherit;
+  font-size: 0.9em;
+  text-align: left;
+  cursor: pointer;
+  background: var(--_assistant-bg);
+  color: var(--_fg);
+}
+
+.suggestion-chip:hover,
+.suggestion-chip:focus-visible {
+  border-color: var(--_accent);
+}
+
+.skill-palette {
+  margin: 8px 12px 0;
+  display: flex;
+  flex-direction: column;
+  max-height: 220px;
+  overflow: auto;
+  /* Scrolling past the end of this must not scroll the page behind it. */
+  overscroll-behavior: contain;
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(20, 20, 50, 0.16);
+}
+
+/* Closed nearly all of the time and mounted on every element. The display
+   above beats the user-agent rule for the hidden attribute, so without this a
+   closed palette still painted its margin, border and shadow as a line over
+   the composer. */
+.skill-palette[hidden] {
+  display: none;
+}
+
+.skill-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  color: var(--_fg);
+}
+
+.skill-item[aria-selected="true"] {
+  background: var(--_assistant-bg);
+}
+
+.skill-item-title {
+  font-weight: 600;
+}
+
+.skill-item-desc {
+  font-size: 0.85em;
+  color: var(--_muted);
+}
+
+/* The hint sits directly above the composer's top border, so a zero bottom
+   margin left the text touching the divider. */
+.skill-hint {
+  margin: 8px 12px;
+  font-size: 0.85em;
+  line-height: 1.4;
+  color: var(--_danger);
+}
+`;

package/src/ui/history/history_styles.ts

@@ -0,0 +1,484 @@
+// 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. It used to light up on hover, which is the affordance of something
+   clickable and made the buttons look like decoration on a clickable strip. The
+   resting surface groups the row instead, so hover can mean what it says: only
+   the buttons respond to it.
+
+   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);
+}
+
+.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/interrupts/approval_styles.ts

@@ -0,0 +1,52 @@
+// The approval card that gates a server-side tool call.
+export const APPROVAL_STYLES: string = `
+/* Approval card — the server-side-tool gate (approve/deny an interrupt). */
+.approval {
+  align-self: stretch;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--_bg);
+  border: 1px solid var(--_accent);
+  border-radius: 10px;
+}
+
+.approval[data-resolved] {
+  opacity: 0.7;
+  border-color: var(--_border);
+}
+
+.approval-body {
+  font-weight: 600;
+}
+
+.approval-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.approval-btn {
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+  padding: 8px 14px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--_bg);
+  color: var(--_fg);
+}
+
+.approval-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.approval-btn--approve {
+  border-color: var(--_accent);
+  background: var(--_accent);
+  color: var(--_on-accent);
+}
+`;