Interfaces for agents that do real work.

Runs, plans, terminals, diffs, traces and approvals. 15 open-source React components for supervising coding and computer-use agents, with a manifest your own agent can install from.

Get started Browse componentsnpx shadcn@latest add https://kuro.abstergo.fyi/r/diff-view.json

One agent run, built entirely from Kura components.Show component names

Migrate session API to @acme/auth

Steps: 2/7
Tokens: 320k tokens
Cost: $1.21 of $5.00
Elapsed: –:––

Plan2 of 6

Read the session routes (done)41.0s
Map call sites of fetchUser() (done)1m 36s
Patch src/auth/client.ts (in progress)
Move refresh into middleware (pending)
Run pnpm test (pending)
Open a pull request (pending)

~/acme-web3.4sexit 0

git diff --stat

src/auth/client.ts | ++++++++++++--------------- 29

src/middleware.ts | +++++++++---- 13

src/auth/login.test.ts | ++++++-- 8

src/lib/http.ts | ----------------------------------------- 41

4 files changed, 28 insertions(+), 63 deletions(-)

$ pnpm tsc --noEmit

✓ No type errors (3.4s)

Subagents4

explorerFound 23 calls to fetchUser() in 9 files84.2k–
, 35%client-patcherReplacing fetchUser()61.4k–
test-writerRewriting session mocks–
reviewerStarts when tests pass–

Changes+19−59

Plan in the open

The agent's todo list as it thinks: what's done, what's running, what failed and why. Sub-tasks, live timers, a folded history.

Plan3 of 8

Review every hunk

Accept or reject the agent's edits hunk by hunk, with syntax highlighting, word-level changes and j/k/a/r on the keyboard. Parses real unified diffs.

Review changes+22−33

@@ −1,7 +1,8 @@Accepted

import { cache } from "react";

import { fetchJson } from "@/lib/http";

import type { Session, User } from "./types";

import { createAuthClient, type Session, type User } from "@acme/auth";

const SESSION_URL = "/api/v1/session";

const REFRESH_URL = "/api/v1/session/refresh";

export const auth = createAuthClient({

baseUrl: process.env.NEXT_PUBLIC_AUTH_URL,

refresh: "auto",

});

@@ −9,14 +10,10 @@

export const fetchUser = cache(async (): Promise<User | null> => {

const res = await fetchJson<Session>(SESSION_URL, { credentials: "include" });

if (!res.ok) return null;

return res.data.user;

const session = await auth.getSession();

return session?.user ?? null;

});

export async function refreshSession(token: string): Promise<Session> {

const res = await fetchJson<Session>(REFRESH_URL, {

method: "POST",

body: JSON.stringify({ token }),

});

if (!res.ok) throw new Error(`refresh failed: ${res.status}`);

return res.data;

export async function refreshSession(session: Session): Promise<Session> {

const next = await auth.refresh(session.refreshToken);

if (!next) throw new Error("refresh failed: session revoked");

return next;

}

@@ −24,3 +21,3 @@

export function isExpired(session: Session, now = Date.now()): boolean {

return session.expiresAt < now;

return session.expiresAt <= now;

}

@@ −28,3 +25,3 @@

export async function signOut(): Promise<void> {

await fetchJson(SESSION_URL, { method: "DELETE", credentials: "include" });

await auth.signOut();

}

@@ −1,4 +1,4 @@

import { describe, expect, it, vi } from "vitest";

import { refreshSession, isExpired } from "../client";

import { auth, isExpired, refreshSession } from "../client";

describe("login", () => {

@@ −8,8 +8,10 @@

it("refreshes an expired session", async () => {

vi.spyOn(globalThis, "fetch").mockResolvedValue(

new Response(JSON.stringify({ expiresAt: 10, user: { id: "u_1" } })),

);

const next = await refreshSession("tok_expired");

vi.spyOn(auth, "refresh").mockResolvedValue({

expiresAt: 10,

refreshToken: "tok_next",

user: { id: "u_1" },

} as never);

const next = await refreshSession({ refreshToken: "tok_expired" } as never);

expect(next.user.id).toBe("u_1");

});

@@ −1,10 +0,0 @@

/** @deprecated Use `auth.getSession()` from @acme/auth. */

export function readSessionCookie(cookie: string | null) {

const raw = cookie?.match(/acme_session=([^;]+)/)?.[1];

if (!raw) return null;

try {

return JSON.parse(atob(raw)) as { userId: string; expiresAt: number };

} catch {

return null;

}

@@ −1,4 +1,4 @@

import { NextResponse, type NextRequest } from "next/server";

import { readSessionCookie } from "@/lib/legacy-session";

import { auth } from "@/auth/client";

const PUBLIC_PATHS = ["/login", "/signup", "/api/health"];

@@ −8,5 +8,5 @@

if (PUBLIC_PATHS.some((p) => pathname.startsWith(p))) return NextResponse.next();

const session = readSessionCookie(request.headers.get("cookie"));

const session = await auth.getSession({ headers: request.headers });

if (!session) {

const url = new URL("/login", request.url);

JKmoveAacceptRrejectUundo1 accepted · 0 rejected

Say yes before it runs

Risky commands wait for a human. Risk level, the exact command, details on demand, ⌘↵ to approve and Esc to deny.

Kura wants to delete a directory

High risk

Clears stale output before rebuilding. Affects 1,204 files under ./build only.

rm -rf build

Working directory: ~/code/kura-ui
Requested by step 3 of 5, “Rebuild the docs”
Not tracked by git — cannot be restored from history

Needs approval

See where the time went

Every model call, tool and subagent on one time axis. Running spans grow live; select one for its input, output, tokens and cost.

Trace4m 40s

Kura

Plan the migration

read_file

search_code

explorer

Draft the client patch

edit_file

test-writer

Write session tests

edit_file

Follow it through the web

Computer-use made legible: the page, the agent's cursor and target, and a step log. Take over when it needs you.

Agent is browsing

github.com/acme/web/compare/main...kura/auth-client

acme/webCodePull requestsActions

Open a pull request

Create a new pull request by comparing changes across two branches.

base: main←compare: kura/auth-client Able to merge

Title

Description

Add a description

Markdown is supportedCreate pull request

4 commits · 6 files changed · +142 −38

Open the compare view (in progress)github.com/acme/web/compare/main...kura/auth-clientnavigate
Focus the title field (pending)input#pr-titleclick
Type the PR title (pending)“Migrate session API to @acme/auth client”type
Write the description (pending)“Replaces fetchUser() and the legacy /api/session…”type
Click “Create pull request” (pending)button[type=submit]click
Read the PR number (pending)#482 · Openextract

Steer without stopping

Queue follow-ups while the agent works. Reorder, edit, or send one now to interrupt and redirect the run.

Queued3

Sends when Kura finishes running pnpm test

Use the refreshSession() helper instead of calling fetch('/api/session') directlysession-flow.png
Don't touch src/legacy/ — it's being deleted next sprint
When tests pass, update the auth section of the README and link the migration guideMIGRATION.md+1

Hover a prompt, or focus it and use Alt+↑/↓, Enter, Delete and ⌘↵.

Install

Your agent can install it, too.

Every component ships a typed manifest: when to use it, when not to, every prop, the anatomy and the keyboard map. The registry, llms.txt, the MCP server and the CLI are generated from it.

Agent setup All 31 components

# give your coding agent the catalog
claude mcp add kura -- npx -y @kura-ui/mcp

# then ask for what you need
> add per-hunk review for the agent's edits, and a terminal for its test runs

# or install directly
npx shadcn@latest add https://kuro.abstergo.fyi/r/diff-view.json