Changes

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add changes

Usage#

Anatomy#

A header with the title, the running diffstat, the file navigator and the bulk decision. Below it, one sheet of files: each row is the trigger (name, status, stat) plus its own Undo and Keep, and opens onto its hunks, each with an optional decision of its own.

import {
  Changes,
  ChangesHeader,
  ChangesTitle,
  ChangesSummary,
  ChangesNav,
  ChangesActions,
  ChangesFiles,
  ChangesFile,
  ChangesFileTrigger,
  ChangesFileName,
  ChangesFileStatus,
  ChangesFileStat,
  ChangesFileActions,
  ChangesFileDiff,
  ChangesFileNote,
  ChangesHunk,
  ChangesHunkHeader,
  ChangesHunkActions,
  ChangesHunkCode,
} from "@/components/ui/changes"

<Changes>
  <ChangesHeader>
    <ChangesTitle />
    <ChangesSummary />
    <ChangesNav />
    <ChangesActions />
  </ChangesHeader>
  <ChangesFiles>
    <ChangesFile>
      <ChangesFileTrigger>
        <ChangesFileName />
        <ChangesFileStatus />
        <ChangesFileStat />
      </ChangesFileTrigger>
      <ChangesFileActions />
      <ChangesFileDiff>
        <ChangesFileNote />
        <ChangesHunk>
          <ChangesHunkHeader />
          <ChangesHunkActions />
          <ChangesHunkCode />
        </ChangesHunk>
      </ChangesFileDiff>
    </ChangesFile>
  </ChangesFiles>
</Changes>

Per-hunk review#

Add ChangesHunkActions to a hunk and it can be kept or undone on its own. The decided hunk folds its code away and the same spot reads Kept or Undone, so the remaining hunks move up under your pointer. Decide the last hunk of a file and the file settles too: kept if any hunk was kept, undone if none was.

import { cookies } from "next/headers"
import { sign, verify } from "@/lib/auth/jwt"
Added: import { db } from "@/lib/db"

const SESSION_COOKIE = "koala_session"
Removed: const SESSION_TTL = 60 * 60 * 24
Added: const SESSION_TTL = 60 * 60 * 24 * 7
Added: const REFRESH_WINDOW = 60 * 60 * 24

export async function getSession() {
  const token = (await cookies()).get(SESSION_COOKIE)?.value
  if (!token) return null
Removed:   return verify(token)
Added:   const session = await verify(token)
Added:   if (!session) return null
Added: 
Added:   const expiresIn = session.exp * 1000 - Date.now()
Added:   if (expiresIn < REFRESH_WINDOW * 1000) {
Added:     await refreshSession(session.userId)
Added:   }
Added: 
Added:   return db.user.findUnique({ where: { id: session.userId } })
}

File states#

Five states, all painted below. Pending is the default and carries no chip, only the actions. Writing while streaming: the name sweeps and there is nothing to decide yet. Conflict when the file changed under the agent: still yours to decide, and never swept up by Keep all. Kept and Undone fold the row; an undone file is struck through and drops out of the summary.

Streaming#

Render a file as soon as the agent starts writing it, with streaming on and the counts it has so far. It enters in place, its numbers roll as lines arrive, and its actions stay folded until it is finished, so nobody keeps half a file. Keep all and Undo all skip it too.

Keyboard#

With focus on a file row, the review runs from the keyboard. Keep or Undo moves focus to the next file still to review and, if the one you decided was open, opens it, so a review is a rhythm of reading and one key.

Controlled#

Uncontrolled, Changes keeps its own record (seed it with defaultValue). Controlled, pass value and onValueChange and apply each decision to the working tree yourself. The record is flat: a file's path, or path#hunk for a single hunk.

In a chat#

Inside a Chat turn or an AI Panel, use variant="plain" and density="compact". The frame goes, the header sits on the message's own axis, and the files stay one quiet sheet under the answer, the same way Tool calls read in a turn.

Density#

Like Tool and Plan, Changes reads the density context or a density prop. It tunes the header (48px or 40px), the rows (44px or 40px) and the hunk headers; the header text always starts on the file names' left edge.

API reference#

FAQ#