Prompt Diff

Two versions of a prompt with what changed between them. Prompts are the source code of an agent and almost never treated that way — the reason a run regressed is usually a sentence somebody rewrote three days ago.

src/components/ui/prompt-diff.tsx

About

From the component's own source, where it was written.

Two versions of a prompt, with what changed between them.

Prompts are the source code of an agent and are almost never treated that way: they get edited in a textarea, and the reason a run regressed is a sentence somebody rewrote three days ago. This is git diff for that.

**Diffed by line, and the algorithm is deliberately simple.** A prefix/suffix trim plus a longest-common-subsequence walk over the middle is enough for prompts, which are short and edited in place. Bringing in a real diff library for a component whose input is forty lines would be the wrong trade for a kit that ships its source into other people's repositories.

Unchanged runs longer than context collapse to a marker, because the point of the view is the change and a wall of identical grey lines buries it.

Install

npx astralyx-ui add prompt-diff

Usage

import { PromptDiff } from '@/components/ui/prompt-diff'

<PromptDiff before={previous.system} after={current.system} />

Composer

Change the props and the source below follows.

PreviousCurrent+5−3

  You are a support agent for Astralyx.

− Answer from the retrieved documents. If they do not cover the question, say so.

− Be concise.

+ Answer from the retrieved documents. If they do not cover the question, say so

+ and offer to open a ticket.

+ Be concise. Prefer British spelling.

− Never issue a refund without checking the customer's plan.

+ Never issue a refund above £200 — escalate those to a human.

+ Never quote a price you have not read from the pricing tool.

Props

context lines

tsx

<PromptDiff
  before={previous.system}
  after={current.system}
  context={2}
/>

Examples

A prompt that grew two rules

tsx

<PromptDiff before={previous} after={current} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`PromptDiff`

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
before	string	required	The two versions. Diffed by line.
after	string	required	The two versions. Diffed by line.
beforeLabel	ReactNode	'Previous'	—
afterLabel	ReactNode	'Current'	—
context	number	2	Unchanged lines kept around each change. Longer runs collapse to a marker — the point of the view is the change.
collapsedLabel	(hidden: number) => string	(hidden) => `${hidden} unchanged line${hidden === 1 ? '' : 's'}`	—
identicalLabel	string	'These two versions are identical.'	—
summary	(added: number, removed: number) => ReactNode	—	Optional caption under the diff.

Functions

Function	Signature	Description
promptDiffLines	(before: string, after: string) => DiffLine[]	Line-level LCS. Fine for prompts; not a general-purpose diff.

Types

`DiffLine`

Two versions of a prompt, with what changed between them.

Field	Type	Description
type	'add' \| 'remove' \| 'same'	—
text	string	—

Behaviour

Topic	Detail	Description
algorithm	prefix/suffix trim + LCS	Deliberately simple. Prompts are short and edited in place; pulling in a diff library for forty lines would be the wrong trade for a kit that ships its source into other people’s repos.