diff options
Diffstat (limited to 'src/features/surface-host/ui')
| -rw-r--r-- | src/features/surface-host/ui/MessageQueueList.svelte | 22 | ||||
| -rw-r--r-- | src/features/surface-host/ui/SurfaceView.svelte | 3 |
2 files changed, 25 insertions, 0 deletions
diff --git a/src/features/surface-host/ui/MessageQueueList.svelte b/src/features/surface-host/ui/MessageQueueList.svelte new file mode 100644 index 0000000..12de970 --- /dev/null +++ b/src/features/surface-host/ui/MessageQueueList.svelte @@ -0,0 +1,22 @@ +<script lang="ts"> + import { parseMessageQueuePayload } from "../logic/message-queue"; + + let { payload }: { readonly payload: unknown } = $props(); + + // Parse defensively; an unparseable payload yields null → render nothing + // (graceful skip, per the custom-field contract). + const data = $derived(parseMessageQueuePayload(payload)); +</script> + +{#if data !== null && data.messages.length > 0} + <ul class="flex flex-col gap-1 text-sm"> + {#each data.messages as msg (msg.id)} + <li class="rounded-box bg-base-200 px-3 py-2"> + <p class="whitespace-pre-wrap">{msg.text}</p> + <time class="text-xs opacity-50" datetime={new Date(msg.queuedAt).toISOString()}> + {new Date(msg.queuedAt).toLocaleTimeString()} + </time> + </li> + {/each} + </ul> +{/if} diff --git a/src/features/surface-host/ui/SurfaceView.svelte b/src/features/surface-host/ui/SurfaceView.svelte index 24be8b8..e5f807a 100644 --- a/src/features/surface-host/ui/SurfaceView.svelte +++ b/src/features/surface-host/ui/SurfaceView.svelte @@ -2,6 +2,7 @@ import type { InvokeMessage, SurfaceSpec } from "@dispatch/ui-contract"; import { groupRenderFields, planSurface } from "../logic/plan"; import Button from "./Button.svelte"; + import MessageQueueList from "./MessageQueueList.svelte"; import Number from "./Number.svelte"; import Progress from "./Progress.svelte"; import Selector from "./Selector.svelte"; @@ -40,6 +41,8 @@ unknown ids gracefully render nothing. --> {#if group.field.rendererId === "table"} <SurfaceTable payload={group.field.payload} /> + {:else if group.field.rendererId === "message-queue"} + <MessageQueueList payload={group.field.payload} /> {/if} {/if} {/each} |