caliper uidocs
DemoSign inGet Pro

Agent output

Free

Review a file change line by line, read what a tool returned, and watch a reply arrive.

Kind CompositionComponents 3
+7 −5
7 added, 5 removed in src/counter.tsx
import { useState } from "react";
Removed: export function Counter({ start = 0 }: { start?: number }) {
Added: export function Counter({ start = 0, step = 1 }: { start?: number; step?: number }) {
const [count, setCount] = useState(start);
Removed: const label = "Count: " + count;
Added: const label = `Count: ${count}`;
function increment() {
Removed: setCount(count + 1);
Added: setCount((current) => Math.min(current + step, maxCount));
}
return (
<div className="counter">
Removed: <p>{label}</p>
Removed: <button onClick={increment}>Add</button>
Added: <p aria-live="polite">{label}</p>
Added: <button onClick={increment} disabled={count >= maxCount}>
Added: Add
Added: </button>
</div>
);
}

text
> caliper@0.4.0 test> vitest run
 ✓ src/counter.test.tsx (4 tests) 38ms ✓ src/table.test.tsx (12 tests) 91ms ✓ src/tree.test.tsx (9 tests) 64ms ✗ src/thread.test.tsx (6 tests | 1 failed) 120ms   → expected "Not sent" but received "Sending…"
 Test Files  1 failed | 3 passed (4)      Tests  1 failed | 30 passed (31)   Duration  1.02s

searchFiles output
filelinematch
src/table.tsx42sortValue
src/sortable-table.tsx18sortValue
docs/DESIGN.md311sortValue
getDeployment output
  • { 5 keys }
  • id"dep_81"
  • state"ready"
  • region"lhr1"
  • url"https://example.com"
$

Review reply

Review of the counter change

The change is safe to merge with one note. It adds a step prop, caps the value at maxCount, and announces the new count to screen readers.

  • The functional update avoids stale state when you click quickly.
  • Disabling the button at the cap is clearer than silently ignoring clicks.
  • maxCount is declared after the component. That works, but moving it above would read better.

Here is a small test you could add:

ts
ts
it("stops at the maximum", () => {  render(<Counter start={98} step={5} />);  userEvent.click(screen.getByRole("button", { name: "Add" }));  expect(screen.getByText("Count: 99")).toBeInTheDocument();});

See the testing notes for the full checklist.

Page appearance

Components #

Each component has its own page with a focused preview, installation, usage and API.