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

package/src/ui/checkpoint_menu.ts

@@ -0,0 +1,153 @@
+import type { RunRow } from "../core/run_index.js";
+import { relativeTime } from "./relative_time.js";
+import { DEFAULT_UI_STRINGS, type UiStrings } from "./ui_strings.js";
+
+/** How the host continues a picked run. */
+export type CheckpointVerb = "resume" | "fork";
+
+/**
+ * The checkpoint panel: continuable runs, each offering **resume** or **fork**.
+ *
+ * A separate surface from the thread drawer on purpose — they are different
+ * axes. A thread is a conversation you switch *to*; a checkpoint is a run you
+ * continue *from*, and one thread can hold many. Folding them into one list
+ * would make "resume" look like "open", which it isn't: resuming starts a new
+ * run seeded from a snapshot.
+ *
+ * Only rows the server marked `continuable` are worth offering, so the host
+ * feeds those; a run with no snapshot would resume from nothing. Pure DOM in
+ * the spirit of {@link SkillsMenu} — the host appends {@link element}, toggles
+ * it, feeds rows via {@link setRuns}, and acts on {@link onPick}.
+ */
+export class CheckpointMenu {
+  /** The panel root. Append to the chat shell; hidden until opened. */
+  readonly element: HTMLDivElement;
+
+  readonly #onPick: (runId: string, verb: CheckpointVerb) => void;
+  readonly #list: HTMLDivElement;
+  readonly #heading: HTMLSpanElement;
+  #strings: UiStrings;
+  #runs: readonly RunRow[] = [];
+
+  constructor(
+    onPick: (runId: string, verb: CheckpointVerb) => void,
+    strings: UiStrings = DEFAULT_UI_STRINGS,
+  ) {
+    this.#onPick = onPick;
+    this.#strings = strings;
+
+    this.element = document.createElement("div");
+    this.element.className = "checkpoints";
+    this.element.setAttribute("part", "checkpoints");
+    this.element.setAttribute("role", "dialog");
+    this.element.setAttribute("aria-label", strings.checkpoints);
+    this.element.hidden = true;
+
+    const header = document.createElement("div");
+    header.className = "checkpoints-header";
+    header.setAttribute("part", "checkpoints-header");
+    this.#heading = document.createElement("span");
+    this.#heading.className = "checkpoints-title";
+    this.#heading.textContent = strings.checkpoints;
+    header.append(this.#heading);
+
+    this.#list = document.createElement("div");
+    this.#list.className = "checkpoints-list";
+    this.#list.setAttribute("part", "checkpoints-list");
+
+    this.element.append(header, this.#list);
+    this.element.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        this.close();
+      }
+    });
+  }
+
+  /** Replace the rows. The host passes only `continuable` runs. */
+  setRuns(runs: readonly RunRow[]): void {
+    this.#runs = runs;
+    this.#render();
+  }
+
+  /** Re-localize a panel built before the host's strings resolved. */
+  setStrings(strings: UiStrings): void {
+    this.#strings = strings;
+    this.element.setAttribute("aria-label", strings.checkpoints);
+    this.#heading.textContent = strings.checkpoints;
+    this.#render();
+  }
+
+  open(): void {
+    this.element.hidden = false;
+  }
+
+  close(): void {
+    this.element.hidden = true;
+  }
+
+  get open_(): boolean {
+    return !this.element.hidden;
+  }
+
+  #render(): void {
+    this.#list.replaceChildren();
+    if (this.#runs.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "checkpoints-empty";
+      empty.setAttribute("part", "checkpoints-empty");
+      empty.textContent = this.#strings.noCheckpoints;
+      this.#list.append(empty);
+      return;
+    }
+    for (const run of this.#runs) {
+      this.#list.append(this.#row(run));
+    }
+  }
+
+  #row(run: RunRow): HTMLDivElement {
+    const row = document.createElement("div");
+    row.className = "checkpoint-row";
+    row.setAttribute("part", "checkpoint-row");
+
+    const label = document.createElement("span");
+    label.className = "checkpoint-label";
+    // A run id is opaque to a person, so the time is the identifying detail;
+    // the id rides `title` for anyone who needs to correlate with server logs.
+    label.textContent =
+      run.started_at === null
+        ? run.run_id
+        : relativeTime(Date.parse(run.started_at), Date.now(), this.#strings);
+    label.title = run.run_id;
+    row.append(label);
+
+    if (run.parent_run_id !== null) {
+      // Lineage, so a branch doesn't read as a duplicate of its parent.
+      const branch = document.createElement("span");
+      branch.className = "checkpoint-branch";
+      branch.setAttribute("part", "checkpoint-branch");
+      branch.textContent = this.#strings.forkedRun;
+      branch.title = run.parent_run_id;
+      row.append(branch);
+    }
+
+    row.append(
+      this.#action(run.run_id, "resume", this.#strings.resumeRun),
+      this.#action(run.run_id, "fork", this.#strings.forkRun),
+    );
+    return row;
+  }
+
+  #action(runId: string, verb: CheckpointVerb, label: string): HTMLButtonElement {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `checkpoint-action checkpoint-${verb}`;
+    button.setAttribute("part", `checkpoint-action checkpoint-${verb}`);
+    button.textContent = label;
+    button.addEventListener("click", () => {
+      this.close();
+      this.#onPick(runId, verb);
+    });
+    return button;
+  }
+}

package/src/ui/styles.ts

@@ -1229,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/ui_strings.ts

@@ -157,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}`. */
@@ -171,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…",

package/src/version.ts

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