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

@ -1094,9 +1094,33 @@ ctx.ui.notify("Done!", "info"); // "info" | "warning" | "error"
- `ctx.ui.editor()`: [handoff.ts](../examples/extensions/handoff.ts)
- `ctx.ui.setEditorText()`: [handoff.ts](../examples/extensions/handoff.ts), [qna.ts](../examples/extensions/qna.ts)
#### Auto-Dismissing Dialogs
#### Timed Dialogs with Countdown
Dialogs can be programmatically dismissed using `AbortSignal`. This is useful for implementing timeouts:
Dialogs support a `timeout` option that auto-dismisses with a live countdown display:
```typescript
// Dialog shows "Title (5s)" → "Title (4s)" → ... → auto-dismisses at 0
const confirmed = await ctx.ui.confirm(
"Timed Confirmation",
"This dialog will auto-cancel in 5 seconds. Confirm?",
{ timeout: 5000 }
);
if (confirmed) {
// User confirmed
} else {
// User cancelled or timed out
}
```
**Return values on timeout:**
- `select()` returns `undefined`
- `confirm()` returns `false`
- `input()` returns `undefined`
#### Manual Dismissal with AbortSignal
For more control (e.g., to distinguish timeout from user cancel), use `AbortSignal`:
```typescript
const controller = new AbortController();
@ -1119,12 +1143,7 @@ if (confirmed) {
}
```
**Return values on abort:**
- `select()` returns `undefined`
- `confirm()` returns `false`
- `input()` returns `undefined`
See [examples/extensions/timed-confirm.ts](../examples/extensions/timed-confirm.ts) for a complete example.
See [examples/extensions/timed-confirm.ts](../examples/extensions/timed-confirm.ts) for complete examples.
### Widgets, Status, and Footer