Think Durable Submissions Submit a Think turn, get a durable receipt immediately, retry safely, and inspect status later.

What this demo shows `submitMessages()` stores pending work before the model runs. Retrying with the same idempotency key returns the existing submission instead of duplicating the chat turn.

Prompt

setPrompt(event.currentTarget.value)}
                />
              </div>

<div>
                <Text size="sm" bold>
                  Idempotency key
                </Text>
                <input
                  aria-label="Idempotency Key"
                  className="mt-2 w-full rounded-lg border border-kumo-line bg-kumo-surface p-3 text-sm outline-none"
                  value={idempotencyKey}
                  onChange={(event) =>
                    setIdempotencyKey(event.currentTarget.value)
                  }
                />
              </div>

{error && (
                <Text size="sm" variant="error">
                  {error}
                </Text>
              )}

<div className="flex flex-wrap gap-2">
                <Button
                  disabled={busy || prompt.trim().length === 0}
                  onClick={() => void submit(false)}
                  icon={<PaperPlaneRightIcon size={16} />}
                >
                  Submit
                </Button>
                <Button
                  variant="secondary"
                  disabled={busy || !lastAck}
                  onClick={() => void submit(true)}
                  icon={<ArrowClockwiseIcon size={16} />}
                >
                  Retry same key
                </Button>
                <Button
                  variant="ghost"
                  onClick={() => setIdempotencyKey(crypto.randomUUID())}
                >
                  New key
                </Button>
              </div>
            </div>
          </Surface>

<Surface className="rounded-xl p-4 ring ring-kumo-line">
            <Text size="sm" bold>
              Latest ACK
            </Text>
            {lastAck ? (
              <dl className="mt-3 space-y-2 text-sm">
                <div>
                  <dt className="text-kumo-subtle">Accepted</dt>
                  <dd>{String(lastAck.accepted)}</dd>
                </div>
                <div>
                  <dt className="text-kumo-subtle">Submission</dt>
                  <dd className="break-all">{lastAck.submissionId}</dd>
                </div>
                <div>
                  <dt className="text-kumo-subtle">Status</dt>
                  <dd>
                    <StatusBadge status={lastAck.status} />
                  </dd>
                </div>
              </dl>
            ) : (
              <span className="mt-3 block">
                <Text size="sm" variant="secondary">
                  Submit a task to see the durable receipt.
                </Text>
              </span>
            )}
          </Surface>
        </section>

<Surface className="rounded-xl p-4 ring ring-kumo-line">
          <div className="mb-4 flex items-center justify-between">
            <div>
              <Text size="lg" bold>
                Submission queue
              </Text>
              <span className="mt-1 block">
                <Text size="xs" variant="secondary">
                  {activeCount} active, {submissions.length} recent total
                </Text>
              </span>
            </div>
            <Button variant="ghost" onClick={() => void refresh()}>
              Refresh
            </Button>
          </div>

<div className="space-y-3">
            {submissions.length === 0 ? (
              <Text size="sm" variant="secondary">
                No submissions yet.
              </Text>
            ) : (
              submissions.map((submission) => (
                <div
                  key={submission.submissionId}
                  className="rounded-lg border border-kumo-line p-3"
                >
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div>
                      <div className="flex items-center gap-2">
                        <StatusBadge status={submission.status} />
                        <span className="text-sm font-medium">
                          {submission.submissionId}
                        </span>
                      </div>
                      <p className="mt-1 text-xs text-kumo-subtle">
                        Created {formatTime(submission.createdAt)} · Started{" "}
                        {formatTime(submission.startedAt)} · Completed{" "}
                        {formatTime(submission.completedAt)}
                      </p>
                    </div>
                    {!isTerminal(submission.status) && (
                      <Button
                        variant="secondary"
                        onClick={() => void cancel(submission.submissionId)}
                        icon={<ProhibitIcon size={16} />}
                      >
                        Cancel
                      </Button>
                    )}
                  </div>
                  {submission.error && (
                    <p className="mt-2 text-xs text-kumo-danger">
                      {submission.error}
                    </p>
                  )}
                </div>
              ))
            )}
          </div>
        </Surface>

<footer className="mt-auto flex justify-center">
          <PoweredByCloudflare />
        </footer>
      </div>
    </main>
  );
}

const root = document.getElementById("root");
if (!root) {
  throw new Error("Root element not found");
}

createRoot(root).render(<App />);
</article></body></html>