Components · signoff-ui

<DiffReview />

Accept or reject agent edits hunk by hunk or file by file, comment on lines, and send the agent what you applied, rejected and said. Large files are diffed in a worker and render only what is near the screen.

Docs and props

Review changes

4 files · 4 hunks · +21 −1

lib/ratelimit.ts+10 −0Viewed

@@ -1,0 +1,10 @@accepted

import { Ratelimit } from '@upstash/ratelimit';

import { redis } from '@/lib/redis';

/** 10 requests per 10 seconds per key, sliding window. */

export const ratelimit = new Ratelimit({

redis,

limiter: Ratelimit.slidingWindow(10, '10 s'),

Comment On line 7

Read the window from an env var, so staging can use a longer one.

prefix: 'ratelimit:chat',

analytics: true,

});

app/api/chat/route.ts+11 −1Viewed

@@ -1,6 +1,7 @@

import { convertToModelMessages, streamText, type UIMessage } from 'ai';

import { openai } from '@ai-sdk/openai';

import { tools } from '@/lib/tools';

import { ratelimit } from '@/lib/ratelimit';

export const maxDuration = 30;

4 unchanged lines

@@ -11,6 +12,15 @@

].join(' ');

export async function POST(req: Request) {

const ip = req.headers.get('x-forwarded-for') ?? 'anonymous';

const { success, reset } = await ratelimit.limit(ip);

if (!success) {

return new Response('Too many requests', {

status: 429,

headers: { 'Retry-After': String(Math.ceil((reset - Date.now()) / 1000)) },

});

}

const { messages }: { messages: UIMessage[] } = await req.json();

if (messages.length === 0) return new Response('Empty conversation', { status: 400 });

const modelMessages = convertToModelMessages(messages);

1 unchanged line

@@ -18,7 +28,7 @@rejected

console.info('chat', { turns: messages.length, last: lastUserMessage?.id });

const result = streamText({

model: openai('gpt-4o'),

model: openai('gpt-4.1-mini'),

system: SYSTEM,

messages: modelMessages,

tools,

4 unchanged lines

docs/rate-limiting.mddocs/guides/rate-limiting.mdViewed

Renamed from docs/rate-limiting.md, without changes.

public/errors/429.pngViewed

Binary file, not shown.

2/6 reviewed · 0 of 4 files viewed · 1 comment · unreviewed hunks are skipped

npm i signoff-ui ai

TSX

import { DiffReview, reviewToolOutput } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/diff-review.json

TSX

import { DiffReview } from '@/components/signoff-ui/diff-review';

useDiffReview(options)

The same review in markup of its own: this list uses the site’s classes and none of the kit’s, and the hook brings the keyboard, decisions, comments and the result.

Docs and props

@@ -1,6 +1,7 @@not decided

+ import { ratelimit } from '@/lib/ratelimit';

@@ -11,6 +12,15 @@not decided

+   const ip = req.headers.get('x-forwarded-for') ?? 'anonymous';
+   const { success, reset } = await ratelimit.limit(ip);
+   if (!success) {
+     return new Response('Too many requests', {
+       status: 429,
+       headers: { 'Retry-After': String(Math.ceil((reset - Date.now()) / 1000)) },
+     });
+   }
+

@@ -18,7 +28,7 @@not decided

-     model: openai('gpt-4o'),
+     model: openai('gpt-4.1-mini'),

J and K move, A and R decide, C writes a note.

npm i signoff-ui ai

TSX

import { useDiffReview, reviewToolOutput } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/use-diff-review.json

TSX

import { useDiffReview } from '@/components/signoff-ui/use-diff-review';

<ApprovalCard />

Approve or deny a tool call once, for the session or always, with what will run, its risk, the arguments editable first, a reason and a key for each choice.

Docs and props

Approval required

High risk

Run command

Installs a package from the npm registry and updates package.json and pnpm-lock.yaml.

~/acme/chat-app

pnpm add @upstash/ratelimit

Remembered for run_command calls where:

command matches

Any arguments

* matches any text but shell operators (; & | > < and backticks); ** matches anything.

Keyboard: press Y to approve, S to approve for this session, A to always approve, N to deny, Shift N to always deny, or Ctrl Enter to approve.

npm i signoff-ui ai

TSX

import { ApprovalCard, ToolApprovalCard, ToolApprovalBatch } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/approval-card.json

TSX

import { ApprovalCard, ToolApprovalCard, ToolApprovalBatch } from '@/components/signoff-ui/approval-card';

useApprovalPolicy()

Approval rules: answer once, for this session or always, by tool and argument pattern. The next call a rule covers is answered without asking, and every decision goes to the audit trail.

Docs and props

The agent asks to run

Approval required

Run command

npm test

Remembered for run_command calls where:

command matches

Any arguments

* matches any text but shell operators (; & | > < and backticks); ** matches anything.

Keyboard: press Y to approve, S to approve for this session, A to always approve, N to deny, Shift N to always deny, or Ctrl Enter to approve.

npm i signoff-ui ai

TSX

import { useApprovalPolicy, webStorageRules, setToolInput } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/use-approval-policy.json

TSX

import { useApprovalPolicy, webStorageRules } from '@/components/signoff-ui/use-approval-policy';

<ToolCallTimeline />

Every tool state with durations, a waterfall, and expandable input and output.

Docs and props

ENOENT: no such file or directory, open 'middleware.ts'

npm i signoff-ui ai

TSX

import { ToolCallTimeline } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/tool-call-timeline.json

TSX

import { ToolCallTimeline } from '@/components/signoff-ui/tool-call-timeline';

<AgentStatus />

Run state in one pill, announced through a live region.

Docs and props

Thinking

Workingread_file3.42s

Waiting for approvalrun_command

Done21.8s

Stopped6.24s

Rate limited by provider

npm i signoff-ui ai

TSX

import { AgentStatus, deriveAgentState } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/agent-status.json

TSX

import { AgentStatus } from '@/components/signoff-ui/agent-status';
import { deriveAgentState } from '@/components/signoff-ui/lib/ai';

<RunMeter />

Tokens, estimated cost and latency; compact for headers, expanded for panels.

Docs and props

variant="expanded"

Run

mock-agent-1

Tokens: 41.1k
Est. cost: $0.056

Input 38.7k(28.8k cached)
Output 2.41k(96 reasoning)

TTFT: 684ms
Total: 21.8s
Cache hit: 74%

$0.032 input · $0.024 output · $2.5/$10 per 1M

variant="compact"

Pass totalUsage from streamText through message metadata, and timing from useRunTiming(status, messages). Cost is an estimate from the pricing you supply.

npm i signoff-ui ai

TSX

import { RunMeter, useRunTiming } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/run-meter.json

TSX

import { RunMeter } from '@/components/signoff-ui/run-meter';
import { useRunTiming } from '@/components/signoff-ui/lib/hooks';

<Sources />

Citations as compact chips or cards; inline [n] markers link to them.

Docs and props

Sources · 3

npm i signoff-ui ai

TSX

import { Sources, getSourceParts } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/sources.json

TSX

import { Sources } from '@/components/signoff-ui/sources';
import { getSourceParts } from '@/components/signoff-ui/lib/ai';

Theming

Every color, radius and font is a CSS variable. Light is the default, .dark switches, and any subtree can override tokens.

Theming docs

Dark

Waiting for approvalrun_command

ENOENT: no such file or directory, open 'middleware.ts'

Light

Waiting for approvalrun_command

ENOENT: no such file or directory, open 'middleware.ts'

Custom tokens

Waiting for approvalrun_command

ENOENT: no such file or directory, open 'middleware.ts'

Labels

Every word the components show or announce is a label. Here the approval and the review are in Portuguese, from one SignoffLabelsProvider.

Labels docs

Aprovação necessária

Risco alto

Executar comando

Instala um pacote do registo npm e atualiza o package.json.

~/acme/chat-app

pnpm add @upstash/ratelimit

Fica memorizado para run_command quando:

command corresponde a

Quaisquer argumentos

* corresponde a qualquer texto exceto operadores da shell (; & | > < e acentos graves); ** a tudo.

Teclado: prima Y para aprovar, S para aprovar nesta sessão, A para aprovar sempre, N para recusar, Shift N para recusar sempre, ou Ctrl Enter para aprovar.

Rever alterações

1 ficheiro · 3 blocos · +11 −1

app/api/chat/route.ts+11 −1Visto

@@ -1,6 +1,7 @@

import { convertToModelMessages, streamText, type UIMessage } from 'ai';

import { openai } from '@ai-sdk/openai';

import { tools } from '@/lib/tools';

import { ratelimit } from '@/lib/ratelimit';

export const maxDuration = 30;

4 linhas inalteradas

@@ -11,6 +12,15 @@

].join(' ');

export async function POST(req: Request) {

const ip = req.headers.get('x-forwarded-for') ?? 'anonymous';

const { success, reset } = await ratelimit.limit(ip);

if (!success) {

return new Response('Too many requests', {

status: 429,

headers: { 'Retry-After': String(Math.ceil((reset - Date.now()) / 1000)) },

});

}

const { messages }: { messages: UIMessage[] } = await req.json();

if (messages.length === 0) return new Response('Empty conversation', { status: 400 });

const modelMessages = convertToModelMessages(messages);

1 linha inalterada

@@ -18,7 +28,7 @@

console.info('chat', { turns: messages.length, last: lastUserMessage?.id });

const result = streamText({

model: openai('gpt-4o'),

model: openai('gpt-4.1-mini'),

system: SYSTEM,

messages: modelMessages,

tools,

4 linhas inalteradas

0/3 revistos

<AgentMessage />

A whole assistant UIMessage: reasoning, streaming markdown, grouped tool calls and sources.

Docs and props

I’ll check the route handler and confirm the limiter API first.

A sliding window smooths bursts better than a fixed window 1, and the check belongs at the top of the handler 3.

Sources · 3

npm i signoff-ui ai

TSX

import { AgentMessage } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/agent-message.json

TSX

import { AgentMessage } from '@/components/signoff-ui/agent-message';

<Markdown />

Streaming-safe markdown: syntax that hasn’t closed yet never flashes raw, and no raw HTML.

Docs and props

The limiter belongs at the top of the handler, before streamText opens the stream:

Read the client's IP from x-forwarded-for.
Call ratelimit.limit(ip) and return a 429 when it fails.

Window	Requests	Burst
Sliding, 10 s	10	smoothed
Fixed, 10 s	10	up to 20 at the edge

ts

const { success } = await limit(ip);if (!success) return tooMany();

npm i signoff-ui ai

TSX

import { Markdown } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/markdown.json

TSX

import { Markdown } from '@/components/signoff-ui/markdown';

<Reasoning />

Open while the model thinks, then one line: “Thought for 1.7s”.

Docs and props

npm i signoff-ui ai

TSX

import { Reasoning } from 'signoff-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/reasoning.json

TSX

import { Reasoning } from '@/components/signoff-ui/reasoning';

useAgUiAgent(agent)

AG-UI agents (LangGraph, CrewAI, Mastra, Pydantic AI) through the same components. This one is a real @ag-ui/client agent replaying a LangGraph-style run: steps, streamed tool arguments, and an interrupt that resumes the run when you answer it.

Docs and props

npm i signoff-ui ai @ag-ui/client

TSX

import { useAgUiAgent } from 'signoff-ui/ag-ui';
// Once per app (with Tailwind v4: @import 'signoff-ui/tailwind.css'; in your CSS)
import 'signoff-ui/styles.css';

npx shadcn@latest add https://signoff-ui.vercel.app/r/ag-ui.json
npm i @ag-ui/client

TSX

import { useAgUiAgent } from '@/components/signoff-ui/use-ag-ui-agent';

Agent Client Protocol

An ACP prompt turn through the same components, with signoff-ui/acp: a scripted agent sends its session updates and asks permission to edit a file, whose diff the card shows, and to run the tests. The card offers the options the agent sent.

ACP docs

Idle