@artooi/ag-ui-web-component 0.10.0 → 0.12.0

package/src/ui/styles.ts

@@ -1028,6 +1028,127 @@ export const STYLES = `
   color: #ffffff;
 }
 
+/* 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(--ag-ui-bg);
+  border: 1px solid var(--ag-ui-accent);
+  border-radius: 10px;
+}
+
+.approval[data-resolved] {
+  opacity: 0.7;
+  border-color: var(--ag-ui-border);
+}
+
+.approval-body {
+  font-weight: 600;
+}
+
+.approval-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.approval-btn {
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 8px;
+  padding: 8px 14px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--ag-ui-bg);
+  color: var(--ag-ui-fg);
+}
+
+.approval-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.approval-btn--approve {
+  border-color: var(--ag-ui-accent);
+  background: var(--ag-ui-accent);
+  color: #ffffff;
+}
+
+/* Question card — the built-in ask_user prompt (radios and/or free text). */
+.question {
+  align-self: stretch;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--ag-ui-bg);
+  border: 1px solid var(--ag-ui-accent);
+  border-radius: 10px;
+}
+
+.question[data-resolved] {
+  opacity: 0.7;
+  border-color: var(--ag-ui-border);
+}
+
+.question-body {
+  font-weight: 600;
+}
+
+.question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.question-choice {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.question-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 10px;
+  font: inherit;
+  color: var(--ag-ui-fg);
+  background: var(--ag-ui-bg);
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 8px;
+}
+
+.question-input:disabled {
+  opacity: 0.6;
+}
+
+.question-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.question-btn {
+  border: 1px solid var(--ag-ui-accent);
+  border-radius: 8px;
+  padding: 8px 14px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--ag-ui-accent);
+  color: #ffffff;
+}
+
+.question-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
 /* Skills — chips row + the /-command palette, above the input. */
 .skill-chips {
   display: flex;
@@ -1108,6 +1229,82 @@ export const STYLES = `
   display: none;
 }
 
+.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(--agui-border, #d7d7dc);
+  border-radius: 0.5rem;
+  background: var(--agui-surface, #fff);
+  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
+  max-height: 60%;
+  overflow-y: auto;
+}
+
+.checkpoints[hidden] {
+  display: none;
+}
+
+.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;
+}
+
+.checkpoint-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+}
+
+.checkpoint-row:hover {
+  background: var(--agui-hover, #f3f3f5);
+}
+
+.checkpoint-label {
+  flex: 1;
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.checkpoint-branch {
+  font-size: 0.6875rem;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(--agui-hover, #f3f3f5);
+  opacity: 0.8;
+}
+
+.checkpoint-action {
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--agui-border, #d7d7dc);
+  border-radius: 0.375rem;
+  background: transparent;
+  color: inherit;
+}
+
+.checkpoint-action:hover {
+  background: var(--agui-hover, #f3f3f5);
+}
+
 .drawer-backdrop {
   position: absolute;
   inset: 0;

package/src/ui/thoughts_block.ts

@@ -42,6 +42,7 @@ export class ThoughtsBlock {
 
     this.#label = document.createElement("span");
     this.#label.className = "thoughts-label";
+    this.#label.setAttribute("part", "thoughts-label");
     this.#label.textContent = strings.thinking;
     this.#toggle.append(this.#label);
 

package/src/ui/thread_drawer.ts

@@ -196,12 +196,15 @@ export class ThreadDrawer {
     select.setAttribute("part", "drawer-row-select");
     const title = document.createElement("span");
     title.className = "drawer-row-title";
+    title.setAttribute("part", "drawer-row-title");
     title.textContent = meta.title;
     const time = document.createElement("span");
     time.className = "drawer-row-time";
+    time.setAttribute("part", "drawer-row-time");
     time.textContent = relativeTime(meta.updatedAt, undefined, this.#strings);
     const preview = document.createElement("span");
     preview.className = "drawer-row-preview";
+    preview.setAttribute("part", "drawer-row-preview");
     preview.textContent = meta.preview;
     select.append(title, time, preview);
     select.addEventListener("click", () => {
@@ -212,6 +215,7 @@ export class ThreadDrawer {
     const rename = document.createElement("button");
     rename.type = "button";
     rename.className = "drawer-row-rename";
+    rename.setAttribute("part", "drawer-row-rename");
     rename.title = this.#strings.rename;
     rename.setAttribute("aria-label", this.#strings.renameConversation);
     rename.textContent = "✎";
@@ -220,6 +224,7 @@ export class ThreadDrawer {
     const remove = document.createElement("button");
     remove.type = "button";
     remove.className = "drawer-row-delete";
+    remove.setAttribute("part", "drawer-row-delete");
     remove.title = this.#strings.delete;
     remove.setAttribute("aria-label", this.#strings.deleteConversation);
     remove.textContent = "🗑";
@@ -227,6 +232,7 @@ export class ThreadDrawer {
 
     const actions = document.createElement("div");
     actions.className = "drawer-row-actions";
+    actions.setAttribute("part", "drawer-row-actions");
     actions.append(rename, remove);
 
     row.append(select, actions);
@@ -238,6 +244,7 @@ export class ThreadDrawer {
     const input = document.createElement("input");
     input.type = "text";
     input.className = "drawer-rename-input";
+    input.setAttribute("part", "drawer-rename-input");
     input.value = meta.title;
     // One-shot: Enter, Escape, and blur can all fire for a single edit (Enter
     // commits and re-renders, which blurs the detached input); the flag makes
@@ -283,17 +290,21 @@ export class ThreadDrawer {
   #confirmDelete(row: HTMLDivElement, meta: ThreadMeta): void {
     const confirm = document.createElement("div");
     confirm.className = "drawer-confirm";
+    confirm.setAttribute("part", "drawer-confirm");
     const label = document.createElement("span");
     label.className = "drawer-confirm-label";
+    label.setAttribute("part", "drawer-confirm-label");
     label.textContent = this.#strings.deletePrompt;
     const yes = document.createElement("button");
     yes.type = "button";
     yes.className = "drawer-confirm-yes";
+    yes.setAttribute("part", "drawer-confirm-yes");
     yes.textContent = this.#strings.delete;
     yes.addEventListener("click", () => this.#callbacks.onDelete(meta.threadId));
     const no = document.createElement("button");
     no.type = "button";
     no.className = "drawer-confirm-no";
+    no.setAttribute("part", "drawer-confirm-no");
     no.textContent = this.#strings.cancel;
     no.addEventListener("click", () => this.#renderList());
     confirm.append(label, yes, no);

package/src/ui/ui_strings.ts

@@ -98,6 +98,26 @@ export interface UiStrings {
   /** Cancel button (confirmation + delete confirm). */
   cancel: string;
 
+  // ── Approval card (server-side tool gate) ───────────────────────────────────
+  /** `aria-label` of the inline server-side-tool approval card. */
+  approveAction: string;
+  /** Fallback approval prompt when the interrupt carries no message. */
+  approvalPrompt: string;
+  /** Approve button (runs the gated server-side tool). */
+  approve: string;
+  /** Deny button (declines the gated server-side tool). */
+  deny: string;
+
+  // ── Question card (the `ask_user` frontend tool) ────────────────────────────
+  /** `aria-label` of the inline question card. */
+  askUserAction: string;
+  /** Radio label for the free-text "other" choice (when custom answers are allowed). */
+  otherOption: string;
+  /** Placeholder for the free-text answer field. */
+  answerPlaceholder: string;
+  /** Submit button for the question card. */
+  submit: string;
+
   // ── Chat-history drawer ─────────────────────────────────────────────────────
   /** Drawer heading. */
   chats: string;
@@ -137,6 +157,16 @@ export interface UiStrings {
   minutesAgo: string;
   /** Hours ago. Token: `{n}`. */
   hoursAgo: string;
+  /** Title of the checkpoint panel. */
+  checkpoints: string;
+  /** Empty state when no run can be continued. */
+  noCheckpoints: string;
+  /** Action: continue a run from its last checkpoint. */
+  resumeRun: string;
+  /** Action: branch a run without touching the original. */
+  forkRun: string;
+  /** Badge on a run that branched from another. */
+  forkedRun: string;
   /** Days ago. Token: `{n}`. */
   daysAgo: string;
   /** Weeks ago. Token: `{n}`. */
@@ -151,6 +181,11 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   collapse: "Collapse",
   expand: "Expand",
   toggleTheme: "Toggle theme",
+  checkpoints: "Continue a run",
+  noCheckpoints: "Nothing to continue yet.",
+  resumeRun: "Resume",
+  forkRun: "Fork",
+  forkedRun: "branched",
 
   conversation: "Conversation",
   thinking: "Assistant is thinking…",
@@ -186,6 +221,16 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   confirm: "Confirm",
   cancel: "Cancel",
 
+  approveAction: "Approve action",
+  approvalPrompt: "Approve this action?",
+  approve: "Approve",
+  deny: "Deny",
+
+  askUserAction: "Question",
+  otherOption: "Other…",
+  answerPlaceholder: "Type your answer…",
+  submit: "Submit",
+
   chats: "Chats",
   noConversations: "No conversations yet.",
   rename: "Rename",

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.10.0";
+export const VERSION: string = "0.12.0";