KQ-1297 · ARTIFACT/PANE

Artifact Pane

A generated file beside the conversation that made it. Switching versions applies the diff in place: shared lines keep their element, dropped lines are struck and fold away on the exit ease, and new lines open on glide under a wash that sweeps across them in a cascade, on the Preview block by block and on the Code tab line by line, while the change count rolls on snap and the Preview / Code panels slide 16px on glide. Dock folds the pane into a chip in the thread: a ghost of its frame flies into the chip on glide, homing on its live box while the pane's column closes, and lands on recoil; the tabs and version pills take arrow keys, and Escape anywhere in the pane docks it.

KQ-1297 · ARTIFACT/PANE

Conversation3 versions

13 min ago
Draft the email we send when a refund is delayed.
Fernworks Model 312 min ago
Here is a first draft. It explains the delay and points them to support.
7 min ago
Shorter, and tell them when it will arrive.
Fernworks Model 36 min ago
Cut it to the essentials and added the expected date.
1 min ago
Add what they can do while they wait.
Fernworks Model 3just now
Added a short list: where to look, when to reply, and that their card is fine.

Refund delay email

+4−0

Your refund is on its way

Hi first_name,

Your refund for order order_id is approved and on its way back to you.

It should reach your account by refund_date. Banks can take up to five working days to show it.

While you wait

Find the refund in the Waylight app under Activity.

If it has not arrived by refund_date, reply to this email.

You do not need to cancel the card you paid with.

Thanks for your patience,

The Waylight Pay team

# Your refund is on its way

Hi {first_name},

Your refund for order {order_id} is approved and on its way back to you.

It should reach your account by {refund_date}. Banks can take up to five working days to show it.

## While you wait

- Find the refund in the Waylight app under Activity.

- If it has not arrived by {refund_date}, reply to this email.

- You do not need to cancel the card you paid with.

Thanks for your patience,

The Waylight Pay team

v3 of 3 · preview

Open it on the Studio stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/artifact-pane

Props

versions: "pills" | "stepper" | "timeline"; default "pills"; How the version history is offered: a segmented control whose indicator slides on snap, Previous and Next around a rolling readout, or a strip of dots under the header whose rail fills on glide.
diff: "flash" | "hold" | "off"; default "flash"; What a version switch shows: marks that flash and fold away, marks that stay (with a Changes toggle) until cleared, or a plain swap.
dock: "inline" | "pinned"; default "inline"; Where the docked pane lands: as a card inside the message that made the shown version, or on a bar pinned to the foot of the conversation.
artifact: Artifact; default defaultArtifact; The file and every version of it, oldest first: title, filename, kind ("document" renders its Markdown, "code" shows a preview node when a version has one) and versions with summary, time and source.
conversation: ArtifactTurn[]; default defaultArtifactConversation; The turns beside it. An assistant turn with a version id carries a chip that opens that version.
version / defaultVersion: string; default the newest version; The shown version's id. Uncontrolled, an appended version is followed when the reader was on the newest one.
onVersionChange: (id: string) => void; default —; Fires from the control, chip or arrow key that chose another version.
tab / defaultTab: "preview" | "code"; default "preview"; The shown view. A code artifact whose version has no preview shows Code only.
onTabChange: (tab: "preview" | "code") => void; default —; Fires from the tab or arrow key that switched the view.
open / defaultOpen: boolean; default true; Whether the pane is open beside the conversation or docked into it as a chip. Controlled or uncontrolled; a host change flies the same way a press does.
onOpenChange: (open: boolean) => void; default —; Fires from the Dock button, the chip, a version chip or Escape, with the new state.
status: "ready" | "writing" | "error"; default "ready"; A new version is being written (a badge, a running hairline and a typing row in the thread), or the last revision failed (a strip with Retry).
onRetry: () => void; default —; Retry was pressed after a failed revision.
onCopy: (text: string, version: ArtifactVersion) => void; default —; The shown version's source was copied to the clipboard.
onDownload: (file: ArtifactFile) => void | false; default —; The shown version is being saved, as { name, text, type }. Return false to save it yourself; otherwise the pane saves it through the browser.
now: number | Date; default the newest version's time; The moment relative times count from, so the surface renders the same on the server and in the browser.
label: string; default —; The surface's accessible name. Defaults to the artifact's title and "the conversation".
sound: boolean; default false; A swish when the visitor docks or opens the pane, a click on copy, download, tabs and versions.
disabled: boolean; default false; Read only: versions, tabs, copy, download and dock do nothing; the panels still scroll.
className: string; default —; Classes for the root. It is 540px tall by default; pass a height class to change it.

Prop	Type	Default	Description
versions	"pills" \| "stepper" \| "timeline"	"pills"	How the version history is offered: a segmented control whose indicator slides on snap, Previous and Next around a rolling readout, or a strip of dots under the header whose rail fills on glide.
diff	"flash" \| "hold" \| "off"	"flash"	What a version switch shows: marks that flash and fold away, marks that stay (with a Changes toggle) until cleared, or a plain swap.
dock	"inline" \| "pinned"	"inline"	Where the docked pane lands: as a card inside the message that made the shown version, or on a bar pinned to the foot of the conversation.
artifact	Artifact	defaultArtifact	The file and every version of it, oldest first: title, filename, kind ("document" renders its Markdown, "code" shows a preview node when a version has one) and versions with summary, time and source.
conversation	ArtifactTurn[]	defaultArtifactConversation	The turns beside it. An assistant turn with a version id carries a chip that opens that version.
version / defaultVersion	string	the newest version	The shown version's id. Uncontrolled, an appended version is followed when the reader was on the newest one.
onVersionChange	(id: string) => void	—	Fires from the control, chip or arrow key that chose another version.
tab / defaultTab	"preview" \| "code"	"preview"	The shown view. A code artifact whose version has no preview shows Code only.
onTabChange	(tab: "preview" \| "code") => void	—	Fires from the tab or arrow key that switched the view.
open / defaultOpen	boolean	true	Whether the pane is open beside the conversation or docked into it as a chip. Controlled or uncontrolled; a host change flies the same way a press does.
onOpenChange	(open: boolean) => void	—	Fires from the Dock button, the chip, a version chip or Escape, with the new state.
status	"ready" \| "writing" \| "error"	"ready"	A new version is being written (a badge, a running hairline and a typing row in the thread), or the last revision failed (a strip with Retry).
onRetry	() => void	—	Retry was pressed after a failed revision.
onCopy	(text: string, version: ArtifactVersion) => void	—	The shown version's source was copied to the clipboard.
onDownload	(file: ArtifactFile) => void \| false	—	The shown version is being saved, as { name, text, type }. Return false to save it yourself; otherwise the pane saves it through the browser.
now	number \| Date	the newest version's time	The moment relative times count from, so the surface renders the same on the server and in the browser.
label	string	—	The surface's accessible name. Defaults to the artifact's title and "the conversation".
sound	boolean	false	A swish when the visitor docks or opens the pane, a click on copy, download, tabs and versions.
disabled	boolean	false	Read only: versions, tabs, copy, download and dock do nothing; the panels still scroll.
className	string	—	Classes for the root. It is 540px tall by default; pass a height class to change it.