Complete "Lowering perceived latency" pattern documentation

- Expand `App_ontoolinputpartial_progressiveRendering` example in
  `app.examples.ts` to show full state management pattern with
  `toolInputs` and `toolInputsPartial` variables
- Add healed JSON caveat to `ontoolinputpartial` JSDoc in `app.ts`
- Update `patterns.md` to reference the expanded example and document
  the streaming preview pattern
- Remove empty `lowerPerceivedLatency` placeholder from `patterns.tsx`

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2026-01-19 15:11:13 -06:00
commit a1ae100ef0
2 changed files with 33 additions and 18 deletions

View file

@ -157,13 +157,34 @@ async function App_ontoolinput_setter(app: App) {
*/
function App_ontoolinputpartial_progressiveRendering(app: App) {
//#region App_ontoolinputpartial_progressiveRendering
let toolInputs: Record<string, unknown> | null = null;
let toolInputsPartial: Record<string, unknown> | null = null;
app.ontoolinputpartial = (params) => {
console.log("Partial args:", params.arguments);
// Update your UI progressively as arguments stream in
toolInputsPartial = params.arguments as Record<string, unknown>;
render();
};
app.ontoolinput = (params) => {
toolInputs = params.arguments as Record<string, unknown>;
toolInputsPartial = null;
render();
};
function render() {
if (toolInputs) {
renderFinalUI(toolInputs);
} else {
renderLoadingUI(toolInputsPartial); // e.g., shimmer with partial preview
}
}
//#endregion App_ontoolinputpartial_progressiveRendering
}
// Stubs for App_ontoolinputpartial_progressiveRendering example
declare function renderLoadingUI(data: Record<string, unknown> | null): void;
declare function renderFinalUI(data: Record<string, unknown>): void;
/**
* Example: Display tool execution results using ontoolresult.
*/

View file

@ -287,6 +287,11 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
* streams partial tool arguments during tool call initialization. This enables
* progressive rendering of tool arguments before they're complete.
*
* **Important:** Partial arguments are "healed" JSON — the host closes unclosed
* brackets/braces to produce valid JSON. This means objects may be incomplete
* (e.g., the last item in an array may be truncated). Use partial data only
* for preview UI, not for critical operations.
*
* This setter is a convenience wrapper around `setNotificationHandler()` that
* automatically handles the notification schema and extracts the params for you.
*