Platform UI bridge
useAppContext().ui lets app-owned UI ask the host to perform host-owned presentation. It contains primitives, not business workflows.
| API | Effect |
|---|---|
toast(message, options?) | Shows an info, success, warning, or error notice. |
confirm(options) | Returns a promise for a host confirmation decision. |
navigate(to) | Navigates through the host router. |
openArtifact(kind, context?) | Opens an artifact in the same app lane using its current renderer. |
closeArtifact() | Closes the active artifact host when one exists. |
openImageLightbox(images, startIndex?) | Opens the shared image viewer with optional captions and source attribution. |
import { useAppContext, useAppFetch } from '@sota/platform';
export function DeleteReportButton({ reportId }: { reportId: string }) {
const appFetch = useAppFetch();
const { ui } = useAppContext();
async function remove() {
const confirmed = await ui.confirm({
title: 'Delete report?',
description: 'This cannot be undone.',
confirmLabel: 'Delete',
destructive: true,
});
if (!confirmed) return;
const response = await appFetch('/reports/' + encodeURIComponent(reportId), {
method: 'DELETE',
});
ui.toast(response.ok ? 'Report deleted' : 'Delete failed', {
kind: response.ok ? 'success' : 'error',
});
}
return <button type="button" onClick={remove}>Delete</button>;
}import { useAppContext } from '@sota/platform';
export function PreviewButton({ previewUrl }: { previewUrl: string }) {
const { ui } = useAppContext();
return <button type="button" onClick={() => ui.openImageLightbox([{
url: previewUrl,
alt: 'Report preview',
caption: 'Page 1',
sourceTitle: 'Quarterly report',
sourceUrl: 'https://reports.example.com/q3',
}], 0)}>Preview</button>;
}Methods may be harmless no-ops when the current host cannot perform the action, such as closing an artifact from a surface without an artifact host. Keep app state authoritative in the app backend.