feat(coding-agent): add timeout option to extension dialogs with live countdown

Extension UI dialogs (select, confirm, input) now support a timeout option
that auto-dismisses with a live countdown display. Simpler alternative to
manually managing AbortSignal for timed dialogs.

Also adds ExtensionUIDialogOptions type export and updates RPC mode to
forward timeout to clients.
This commit is contained in:
Nico Bailon 2026-01-06 21:34:23 -08:00
parent fcb3b4aa72
commit 77477f6166
12 changed files with 262 additions and 191 deletions

View file

@ -1,16 +1,49 @@
/**
* Example extension demonstrating AbortSignal for auto-dismissing dialogs.
* Example extension demonstrating timed dialogs with live countdown.
*
* Commands:
* - /timed - Shows confirm dialog that auto-cancels after 5 seconds
* - /timed-select - Shows select dialog that auto-cancels after 10 seconds
* - /timed - Shows confirm dialog that auto-cancels after 5 seconds with countdown
* - /timed-select - Shows select dialog that auto-cancels after 10 seconds with countdown
* - /timed-signal - Shows confirm using AbortSignal (manual approach)
*/
import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
export default function (pi: ExtensionAPI) {
// Simple approach: use timeout option (recommended)
pi.registerCommand("timed", {
description: "Show a timed confirmation dialog (auto-cancels in 5s)",
description: "Show a timed confirmation dialog (auto-cancels in 5s with countdown)",
handler: async (_args, ctx) => {
const confirmed = await ctx.ui.confirm(
"Timed Confirmation",
"This dialog will auto-cancel in 5 seconds. Confirm?",
{ timeout: 5000 },
);
if (confirmed) {
ctx.ui.notify("Confirmed by user!", "info");
} else {
ctx.ui.notify("Cancelled or timed out", "info");
}
},
});
pi.registerCommand("timed-select", {
description: "Show a timed select dialog (auto-cancels in 10s with countdown)",
handler: async (_args, ctx) => {
const choice = await ctx.ui.select("Pick an option", ["Option A", "Option B", "Option C"], { timeout: 10000 });
if (choice) {
ctx.ui.notify(`Selected: ${choice}`, "info");
} else {
ctx.ui.notify("Selection cancelled or timed out", "info");
}
},
});
// Manual approach: use AbortSignal for more control
pi.registerCommand("timed-signal", {
description: "Show a timed confirm using AbortSignal (manual approach)",
handler: async (_args, ctx) => {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
@ -34,30 +67,4 @@ export default function (pi: ExtensionAPI) {
}
},
});
pi.registerCommand("timed-select", {
description: "Show a timed select dialog (auto-cancels in 10s)",
handler: async (_args, ctx) => {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000);
ctx.ui.notify("Select dialog will auto-cancel in 10 seconds...", "info");
const choice = await ctx.ui.select(
"Pick an option (auto-cancels in 10s)",
["Option A", "Option B", "Option C"],
{ signal: controller.signal },
);
clearTimeout(timeoutId);
if (choice) {
ctx.ui.notify(`Selected: ${choice}`, "info");
} else if (controller.signal.aborted) {
ctx.ui.notify("Selection timed out", "warning");
} else {
ctx.ui.notify("Selection cancelled", "info");
}
},
});
}