Review your React code from your own scripts
Send React — one component, a component with its hooks, several files with file-name
comment headers, or a whole grab-bag of JSX/TSX — and get back one JSON object: an
honest sound / refactor / rework verdict, a health check across five React-code areas, findings
ranked by severity each with corrected JSX/TSX, a twelve-item checklist scored against the
paste, and a complete Refined.tsx rewrite of what you pasted. Everything this app
does goes through the SkillSafe App API — plain JSON over HTTPS — so you can wire the
review into a CI gate, a pull-request bot, or a pre-merge check that refuses a diff
introducing a fresh useEffect + fetch data load or an index-keyed
.map().
Every code step below is shown in cURL, Python, JavaScript, Go, Java, Ruby, PHP and C#;
pick a language once and the whole page follows.
Basics
Base URL: https://api.skillsafe.ai/v1/app-api, app slug
react-clinic. Every request sends
Authorization: Bearer <token> and JSON bodies with
Content-Type: application/json. Responses are wrapped in an envelope:
{"data": …} on success, {"error": {"code", "message"}} on failure.
The review itself is produced by the gpt-terra model. Estimates are free;
runs are metered against your credit balance. There is a single run task — one paste
in, one review out, no follow-up calls and no session state to carry.
| Status | Meaning |
|---|---|
401 | Missing or expired token — create a new session. |
402 | Not enough credits — top up at skillsafe.ai/account/credits. |
403 | The token isn't allowed to do this (e.g. a guest reviewing a very large paste). |
404 | Unknown job or record id. |
5xx | Transient platform error — retry with backoff. |
Browsers enforce CORS for this API, so run these examples from a server, script or terminal — not from another website's frontend.
Step 0 — A tiny client
Every task below is a single HTTP call, so start with a short helper that adds the auth
header, sends JSON and unwraps the data envelope. The later steps reuse it.
export API="https://api.skillsafe.ai/v1/app-api"
export TOKEN="YOUR_TOKEN" # see step 1
# every call looks like:
# curl -s "$API/..." -H "Authorization: Bearer $TOKEN" [-d '{json}']
# jq is used below to pull fields out of the {"data": ...} envelope
import json, requests
API = "https://api.skillsafe.ai/v1/app-api"
TOKEN = "YOUR_TOKEN" # see step 1 — read it from your shell environment in real code
def api(method, path, body=None, **headers):
res = requests.request(method, API + path, json=body,
headers={"Authorization": f"Bearer {TOKEN}", **headers})
payload = res.json()
if not res.ok:
raise RuntimeError(payload.get("error", {}).get("message", res.reason))
return payload["data"]
// Node 18+ (built-in fetch)
const API = "https://api.skillsafe.ai/v1/app-api";
const TOKEN = "YOUR_TOKEN"; // see step 1 — read it from your shell environment in real code
async function api(method, path, body, extraHeaders = {}) {
const res = await fetch(API + path, {
method,
headers: { Authorization: `Bearer ${TOKEN}`, "Content-Type": "application/json", ...extraHeaders },
body: body === undefined ? undefined : JSON.stringify(body),
});
const json = await res.json();
if (!res.ok) throw new Error(json.error?.message ?? res.statusText);
return json.data;
}
package main
import (
"bytes"
"encoding/json"
"fmt"
"net/http"
"os"
)
const API = "https://api.skillsafe.ai/v1/app-api"
var token = os.Getenv("SKILLSAFE_TOKEN") // see step 1
func call(method, path string, body, out any) error {
var buf bytes.Buffer
if body != nil {
json.NewEncoder(&buf).Encode(body)
}
req, _ := http.NewRequest(method, API+path, &buf)
req.Header.Set("Authorization", "Bearer "+token)
req.Header.Set("Content-Type", "application/json")
res, err := http.DefaultClient.Do(req)
if err != nil {
return err
}
defer res.Body.Close()
var env struct {
Data json.RawMessage `json:"data"`
Error *struct{ Message string `json:"message"` } `json:"error"`
}
json.NewDecoder(res.Body).Decode(&env)
if res.StatusCode >= 400 {
return fmt.Errorf("api %s %s: %s", method, path, env.Error.Message)
}
if out == nil {
return nil
}
return json.Unmarshal(env.Data, out)
}
// Java 17+, no dependencies. Pair with your JSON library (Jackson, Gson…)
// to read fields out of the returned envelope.
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
public class SkillSafe {
static final String API = "https://api.skillsafe.ai/v1/app-api";
static final String TOKEN = System.getenv("SKILLSAFE_TOKEN"); // see step 1
static final HttpClient HTTP = HttpClient.newHttpClient();
static String api(String method, String path, String jsonBody) throws Exception {
var req = HttpRequest.newBuilder(URI.create(API + path))
.header("Authorization", "Bearer " + TOKEN)
.header("Content-Type", "application/json")
.method(method, jsonBody == null
? HttpRequest.BodyPublishers.noBody()
: HttpRequest.BodyPublishers.ofString(jsonBody))
.build();
var res = HTTP.send(req, HttpResponse.BodyHandlers.ofString());
if (res.statusCode() >= 400) throw new RuntimeException(res.body());
return res.body(); // envelope: {"data": …}
}
}
require "net/http"
require "json"
API = "https://api.skillsafe.ai/v1/app-api"
TOKEN = ENV.fetch("SKILLSAFE_TOKEN") # see step 1
def api(method, path, body = nil)
uri = URI(API + path)
req = Net::HTTP.const_get(method.capitalize).new(uri)
req["Authorization"] = "Bearer #{TOKEN}"
req["Content-Type"] = "application/json"
req.body = body.to_json if body
res = Net::HTTP.start(uri.host, uri.port, use_ssl: true) { |h| h.request(req) }
payload = JSON.parse(res.body)
raise (payload.dig("error", "message") || res.message) unless res.is_a?(Net::HTTPSuccess)
payload["data"]
end
<?php
const API = "https://api.skillsafe.ai/v1/app-api";
$TOKEN = getenv("SKILLSAFE_TOKEN"); // see step 1
function api(string $method, string $path, ?array $body = null): mixed {
global $TOKEN;
$ch = curl_init(API . $path);
curl_setopt_array($ch, [
CURLOPT_CUSTOMREQUEST => $method,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => [
"Authorization: Bearer $TOKEN",
"Content-Type: application/json",
],
CURLOPT_POSTFIELDS => $body === null ? null : json_encode($body),
]);
$payload = json_decode(curl_exec($ch), true);
$status = curl_getinfo($ch, CURLINFO_RESPONSE_CODE);
curl_close($ch);
if ($status >= 400) {
throw new Exception($payload["error"]["message"] ?? "HTTP $status");
}
return $payload["data"];
}
// .NET 8+
using System.Net.Http.Json;
using System.Text.Json;
static class SkillSafe
{
const string Api = "https://api.skillsafe.ai/v1/app-api";
static readonly HttpClient Http = new();
static SkillSafe() =>
Http.DefaultRequestHeaders.Authorization =
new("Bearer", Environment.GetEnvironmentVariable("SKILLSAFE_TOKEN")); // see step 1
public static async Task<JsonElement> ApiAsync(HttpMethod method, string path, object? body = null)
{
var req = new HttpRequestMessage(method, Api + path);
if (body != null) req.Content = JsonContent.Create(body);
var res = await Http.SendAsync(req);
var json = await res.Content.ReadFromJsonAsync<JsonElement>();
if (!res.IsSuccessStatusCode)
throw new Exception(json.GetProperty("error").GetProperty("message").GetString());
return json.GetProperty("data");
}
}
Step 1 — Get a token
A guest token lets you check balances and estimate costs for free. For metered review runs
billed to your own account, use your personal token: open the
token page, sign in with SkillSafe, and press
Copy shell export — it puts export SKILLSAFE_TOKEN="…" on your
clipboard, which every example below reads. Treat the token like a password: it can spend
your credits. For fully headless scripts, POST /guest mints a guest token with
no browser involved.
curl -s -X POST "$API/guest" \
-H "Content-Type: application/json" \
-d '{"slug":"react-clinic"}' | jq -r '.data.token'
token = api("POST", "/guest", {"slug": "react-clinic"})["token"]
const { token } = await api("POST", "/guest", { slug: "react-clinic" });
var guest struct{ Token string `json:"token"` }
err := call("POST", "/guest", map[string]string{"slug": "react-clinic"}, &guest)
String envelope = api("POST", "/guest", """
{"slug":"react-clinic"}""");
// token is at data.token in the returned JSON
token = api("POST", "/guest", { slug: "react-clinic" })["token"]
$token = api("POST", "/guest", ["slug" => "react-clinic"])["token"];
var guest = await SkillSafe.ApiAsync(HttpMethod.Post, "/guest",
new { slug = "react-clinic" });
var token = guest.GetProperty("token").GetString();
The app stores this browser's token under the localStorage key
skillsafe_app_token:react-clinic, on the app's own origin. The
token page reads and manages it for you — you never need
to open developer tools.
Step 2 — Check who you are and your balance
Returns subject_type ("user" or "guest"),
subject_id and your credits balance. Check this before reviewing
a large paste.
curl -s "$API/me" -H "Authorization: Bearer $TOKEN" | jq '.data'
me = api("GET", "/me")
print(me["subject_type"], me["credits"])
const me = await api("GET", "/me");
console.log(me.subject_type, me.credits);
var me struct {
SubjectType string `json:"subject_type"`
Credits int64 `json:"credits"`
}
err := call("GET", "/me", nil, &me)
String envelope = api("GET", "/me", null);
// data.subject_type, data.credits
me = api("GET", "/me")
puts "#{me["subject_type"]}: #{me["credits"]} credits"
$me = api("GET", "/me");
echo "{$me['subject_type']}: {$me['credits']} credits\n";
var me = await SkillSafe.ApiAsync(HttpMethod.Get, "/me");
Console.WriteLine($"{me.GetProperty("subject_type")}: {me.GetProperty("credits")} credits");
Step 3 — Estimate the cost
Send exactly the input you would send to /run; the response's
hold_credits is the worst-case cost. Nothing is charged and no job is created,
so estimating is free — useful when you are feeding in a whole diff or a directory of
source files and want a ceiling before spending credits.
| Input field | Type | Notes |
|---|---|---|
code | string, required | The React source to review, up to 100000 characters: one component, a component with its hooks, or several files concatenated with file-name comment headers such as // orders/OrdersList.tsx. Very long pastes may be clipped middle-out, with a // [... clipped ...] marker showing where. |
target | string | spa | rsc | library | legacy | unknown — what the code is. The review is calibrated to it: spa (a client-rendered app on Vite/CRA with React Router) makes client state ownership, data fetching that is not a raw useEffect, router-level loading and error boundaries and render cost first-class concerns; rsc (Next.js App Router / React Server Components) makes the server/client boundary the central question — where "use client" belongs, what may stay a server component, which data fetching happens on the server, and what must not cross the boundary; library (a reusable component library or design system) makes stateless components with state hoisted to the caller, stable public prop types, forwarded refs, controlled/uncontrolled discipline and no hidden global state first-class concerns; legacy (class components or a pre-hooks codebase) treats lifecycle methods and setState callbacks as the legitimate tools and reviews their correct use instead of filing them as defects. On unknown the review infers from the paste and says which it assumed. |
notes | string, optional | Extra context, up to 20000 characters: what the component does, performance constraints, the React version and framework, what is intentionally unfinished, which public props cannot break. |
prescan_facts | object, optional | What the app's free client-side prescan mechanically detected in the code: {"antipatterns": [], "items": [], "signals": {}}. antipatterns and items hold {id, label, lines} entries — keyword-matched React smells (ap:index-key, ap:fetch-in-effect, ap:missing-cleanup, ap:derived-state-effect, ap:state-mutation, ap:conditional-hook) and the declarations found (i:component:Dashboard, i:hook:useOrders, i:context:ThemeContext), each with the line numbers it was seen on. signals is a counter object: {"components": 0, "custom_hooks": 0, "state_hooks": 0, "effect_hooks": 0, "memo_hooks": 0, "list_renders": 0, "handlers": 0, "tests": 0, "lines": 0}. Every id you send comes back in coverage_check. The web UI fills this from its own scan; API callers may omit the field or send {"antipatterns": [], "items": [], "signals": {}}. |
retry_note | string, optional | Only set by the app's automatic reformat retry when a first reply was not valid JSON. Leave it out. |
cat > Orders.tsx <<'REACT'
// Orders.tsx
import { useEffect, useState } from "react";
export function Orders({ customerId }) {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch("/api/orders?customer=" + customerId)
.then((r) => r.json())
.then(setOrders);
}, []);
return (
<ul>
{orders.map((o, i) => (
<li key={i}>{o.total}</li>
))}
</ul>
);
}
REACT
jq -n --rawfile c Orders.tsx \
'{code: $c, target: "spa", notes: "",
prescan_facts: {antipatterns: [], items: [], signals: {}}}' > input.json
curl -s -X POST "$API/estimate" \
-H "Authorization: Bearer $TOKEN" -H "Content-Type: application/json" \
-d @input.json | jq '.data.hold_credits'
CODE = """// Orders.tsx
import { useEffect, useState } from "react";
export function Orders({ customerId }) {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch("/api/orders?customer=" + customerId)
.then((r) => r.json())
.then(setOrders);
}, []);
return (
<ul>
{orders.map((o, i) => (
<li key={i}>{o.total}</li>
))}
</ul>
);
}"""
payload = {
"code": CODE,
"target": "spa",
"notes": "",
"prescan_facts": {"antipatterns": [], "items": [], "signals": {}},
}
est = api("POST", "/estimate", payload)
print("worst case:", est.get("hold_credits", est.get("credits")), "credits")
const code = `// Orders.tsx
import { useEffect, useState } from "react";
export function Orders({ customerId }) {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch("/api/orders?customer=" + customerId)
.then((r) => r.json())
.then(setOrders);
}, []);
return (
<ul>
{orders.map((o, i) => (
<li key={i}>{o.total}</li>
))}
</ul>
);
}`;
const payload = {
code,
target: "spa",
notes: "",
prescan_facts: { antipatterns: [], items: [], signals: {} },
};
const est = await api("POST", "/estimate", payload);
console.log("worst case:", est.hold_credits ?? est.credits, "credits");
const code = `// Orders.tsx
import { useEffect, useState } from "react";
export function Orders({ customerId }) {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch("/api/orders?customer=" + customerId)
.then((r) => r.json())
.then(setOrders);
}, []);
return (
<ul>
{orders.map((o, i) => (
<li key={i}>{o.total}</li>
))}
</ul>
);
}`
payload := map[string]any{
"code": code,
"target": "spa",
"notes": "",
"prescan_facts": map[string]any{
"antipatterns": []any{}, "items": []any{}, "signals": map[string]any{},
},
}
var est struct{ HoldCredits int64 `json:"hold_credits"` }
err := call("POST", "/estimate", payload, &est)
String code = """
// Orders.tsx
import { useEffect, useState } from "react";
export function Orders({ customerId }) {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch("/api/orders?customer=" + customerId)
.then((r) => r.json())
.then(setOrders);
}, []);
return (
<ul>
{orders.map((o, i) => (
<li key={i}>{o.total}</li>
))}
</ul>
);
}""";
String jsonPayload = """
{"code": %s, "target": "spa",
"notes": "",
"prescan_facts": {"antipatterns": [], "items": [], "signals": {}}}
""".formatted(toJsonString(code));
String envelope = api("POST", "/estimate", jsonPayload);
// worst-case cost is at data.hold_credits
CODE_TEXT = <<~'REACT'
// Orders.tsx
import { useEffect, useState } from "react";
export function Orders({ customerId }) {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch("/api/orders?customer=" + customerId)
.then((r) => r.json())
.then(setOrders);
}, []);
return (
<ul>
{orders.map((o, i) => (
<li key={i}>{o.total}</li>
))}
</ul>
);
}
REACT
payload = { code: CODE_TEXT, target: "spa",
notes: "",
prescan_facts: { antipatterns: [], items: [], signals: {} } }
est = api("POST", "/estimate", payload)
puts "worst case: #{est["hold_credits"] || est["credits"]} credits"
$code = <<<'REACT'
// Orders.tsx
import { useEffect, useState } from "react";
export function Orders({ customerId }) {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch("/api/orders?customer=" + customerId)
.then((r) => r.json())
.then(setOrders);
}, []);
return (
<ul>
{orders.map((o, i) => (
<li key={i}>{o.total}</li>
))}
</ul>
);
}
REACT;
$payload = [
"code" => $code,
"target" => "spa",
"notes" => "",
"prescan_facts" => ["antipatterns" => [], "items" => [], "signals" => new stdClass()],
];
$est = api("POST", "/estimate", $payload);
echo "worst case: " . ($est["hold_credits"] ?? $est["credits"]) . " credits\n";
var code = """
// Orders.tsx
import { useEffect, useState } from "react";
export function Orders({ customerId }) {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetch("/api/orders?customer=" + customerId)
.then((r) => r.json())
.then(setOrders);
}, []);
return (
<ul>
{orders.map((o, i) => (
<li key={i}>{o.total}</li>
))}
</ul>
);
}
""";
var payload = new {
code,
target = "spa",
notes = "",
prescan_facts = new {
antipatterns = Array.Empty<object>(), items = Array.Empty<object>(),
signals = new { },
},
};
var est = await SkillSafe.ApiAsync(HttpMethod.Post, "/estimate", payload);
Console.WriteLine($"worst case: {est.GetProperty("hold_credits")} credits");
prescan_facts is how you make the review answer for things you already know
about. Send {"antipatterns": [{"id": "ap:index-key", "label": "index-based list keys",
"lines": [16]}, {"id": "ap:fetch-in-effect", "label": "raw useEffect + fetch", "lines":
[7]}], "items": [{"id": "i:component:Orders", "label": "Orders (component)", "lines": [4]}],
"signals": {"components": 1, "custom_hooks": 0, "state_hooks": 1, "effect_hooks": 1,
"memo_hooks": 0, "list_renders": 1, "handlers": 0, "tests": 0, "lines": 21}}
and every one of those ids comes back in coverage_check — addressed, or
explained away as a false positive (an index key over a list that is rendered once and never
reordered is harmless, and the review says so). Nothing you flag is
silently dropped.
Step 4 — Run the review and wait for the result
/run takes the same input as /estimate, places a credit hold and
returns a job_id. Poll /jobs/{job_id} every 1–2 seconds
until status is succeeded or failed (a run typically
takes 30–90 s, since the refined rewrite is written out in full). Always send an
Idempotency-Key header so a network retry can't start a second,
double-charged run. The review is in output — usually nested as
output.output, and as a JSON string, so parse defensively. The samples
below print the review name and verdict, the five health areas and the findings, then write
rewrite.code to Refined.tsx using
rewrite.filename.
JOB_ID=$(curl -s -X POST "$API/run" \
-H "Authorization: Bearer $TOKEN" -H "Content-Type: application/json" \
-H "Idempotency-Key: review-$(date +%s)" \
-d @input.json | jq -r '.data.job_id')
while :; do
JOB=$(curl -s "$API/jobs/$JOB_ID" -H "Authorization: Bearer $TOKEN")
STATUS=$(echo "$JOB" | jq -r '.data.status')
[ "$STATUS" = "succeeded" ] || [ "$STATUS" = "failed" ] && break
sleep 2
done
# unwrap the review once, then read it
echo "$JOB" | jq -r '.data.output.output' > review.json
jq -r '
"\(.review_name) [\(.verdict_level)]: \(.verdict)",
"",
"HEALTH",
(.health[] | " [\(.status)] \(.area) - \(.note)"),
"",
"FINDINGS",
(.findings[] | " (\(.severity)) \(.category): \(.title)"),
"",
"CHECKLIST",
(.checklist[] | " [\(.status)] \(.item) - \(.note)")' review.json
# and drop the refined code straight into the repo
jq -r '.rewrite.code' review.json > "$(jq -r '.rewrite.filename' review.json)" # Refined.tsx
import time
job_id = api("POST", "/run", payload,
**{"Idempotency-Key": "review-001"})["job_id"]
while True:
job = api("GET", f"/jobs/{job_id}")
if job["status"] in ("succeeded", "failed"):
break
time.sleep(1.5)
if job["status"] == "failed":
raise RuntimeError(job.get("error", "run failed"))
raw = job["output"]
if isinstance(raw, dict) and "output" in raw:
raw = raw["output"]
review = json.loads(raw) if isinstance(raw, str) else raw
print(f'{review["review_name"]} [{review["verdict_level"]}]: {review["verdict"]}')
for area in review["health"]:
print(f' [{area["status"]:>4}] {area["area"]:<32} {area["note"]}')
for f in review["findings"]:
print(f' ({f["severity"]}) {f["category"]}: {f["title"]}')
if f["fix_code"]:
print(f' {f["fix_code"]}')
for item in review["checklist"]:
print(f' [{item["status"]:>4}] {item["item"]:<42} {item["note"]}')
for c in review["coverage_check"]:
print(f' {c["id"]}: {"ok" if c["addressed"] else "SET ASIDE"} - {c["note"]}')
with open(review["rewrite"]["filename"], "w", encoding="utf-8") as fh: # Refined.tsx
fh.write(review["rewrite"]["code"])
import { writeFileSync } from "node:fs";
const { job_id } = await api("POST", "/run", payload,
{ "Idempotency-Key": crypto.randomUUID() });
let job;
do {
await new Promise((r) => setTimeout(r, 1500));
job = await api("GET", `/jobs/${job_id}`);
} while (job.status !== "succeeded" && job.status !== "failed");
if (job.status === "failed") throw new Error(job.error ?? "run failed");
const raw = job.output?.output ?? job.output;
const review = typeof raw === "string" ? JSON.parse(raw) : raw;
console.log(`${review.review_name} [${review.verdict_level}]: ${review.verdict}`);
for (const area of review.health) {
console.log(` [${area.status}] ${area.area}: ${area.note}`);
}
for (const f of review.findings) {
console.log(` (${f.severity}) ${f.category}: ${f.title}`);
if (f.fix_code) console.log(` ${f.fix_code}`);
}
for (const item of review.checklist) console.log(` [${item.status}] ${item.item}: ${item.note}`);
for (const c of review.coverage_check) {
console.log(` ${c.id}: ${c.addressed ? "ok" : "SET ASIDE"} - ${c.note}`);
}
writeFileSync(review.rewrite.filename, review.rewrite.code); // Refined.tsx
var started struct{ JobID string `json:"job_id"` }
if err := call("POST", "/run", payload, &started); err != nil {
log.Fatal(err)
}
var job struct {
Status string `json:"status"`
Error string `json:"error"`
Output json.RawMessage `json:"output"`
}
for {
if err := call("GET", "/jobs/"+started.JobID, nil, &job); err != nil {
log.Fatal(err)
}
if job.Status == "succeeded" || job.Status == "failed" {
break
}
time.Sleep(1500 * time.Millisecond)
}
// job.Output is {"output": "<json string>"} — unwrap, unquote, then unmarshal:
type Review struct {
ReviewName string `json:"review_name"`
VerdictLevel string `json:"verdict_level"`
Verdict string `json:"verdict"`
Health []struct {
Area, Status, Note string
} `json:"health"`
Findings []struct {
Severity, Category, Title, Detail string
FixCode string `json:"fix_code"`
} `json:"findings"`
Checklist []struct {
Item, Status, Note string
} `json:"checklist"`
Rewrite struct {
Filename, Code string
} `json:"rewrite"`
}
var wrapper struct{ Output string `json:"output"` }
json.Unmarshal(job.Output, &wrapper)
var review Review
json.Unmarshal([]byte(wrapper.Output), &review)
fmt.Printf("%s [%s]: %s\n", review.ReviewName, review.VerdictLevel, review.Verdict)
for _, a := range review.Health {
fmt.Printf(" [%s] %s: %s\n", a.Status, a.Area, a.Note)
}
for _, f := range review.Findings {
fmt.Printf(" (%s) %s: %s\n", f.Severity, f.Category, f.Title)
}
for _, c := range review.Checklist {
fmt.Printf(" [%s] %s: %s\n", c.Status, c.Item, c.Note)
}
os.WriteFile(review.Rewrite.Filename, []byte(review.Rewrite.Code), 0o644) // Refined.tsx
String envelope = api("POST", "/run", jsonPayload);
String jobId = /* data.job_id via your JSON library */;
while (true) {
String job = api("GET", "/jobs/" + jobId, null);
String status = /* data.status */;
if (status.equals("succeeded") || status.equals("failed")) break;
Thread.sleep(1500);
}
// The review is at data.output.output as a JSON string — parse it again, then read
// review_name, verdict_level, verdict, overview, health[] (five areas with area/status/note),
// findings[] (severity/category/title/detail/fix_code), checklist[] (item/status/note),
// coverage_check[] (id/addressed/note), rewrite{filename, code}, next_steps[] and summary.
// Finally write the refined code to disk:
// Files.writeString(Path.of(rewriteFilename), rewriteCode); // Refined.tsx
started = api("POST", "/run", payload)
job = nil
loop do
job = api("GET", "/jobs/#{started["job_id"]}")
break if %w[succeeded failed].include?(job["status"])
sleep 1.5
end
raise (job["error"] || "run failed") if job["status"] == "failed"
raw = job["output"].is_a?(Hash) ? job["output"].fetch("output", job["output"]) : job["output"]
review = raw.is_a?(String) ? JSON.parse(raw) : raw
puts "#{review["review_name"]} [#{review["verdict_level"]}]: #{review["verdict"]}"
review["health"].each { |a| puts " [#{a["status"]}] #{a["area"]}: #{a["note"]}" }
review["findings"].each do |f|
puts " (#{f["severity"]}) #{f["category"]}: #{f["title"]}"
puts " #{f["fix_code"]}" unless f["fix_code"].to_s.empty?
end
review["checklist"].each { |c| puts " [#{c["status"]}] #{c["item"]}: #{c["note"]}" }
review["coverage_check"].each { |c| puts " #{c["id"]}: #{c["addressed"] ? "ok" : "SET ASIDE"}" }
File.write(review["rewrite"]["filename"], review["rewrite"]["code"]) # Refined.tsx
$started = api("POST", "/run", $payload);
do {
sleep(2);
$job = api("GET", "/jobs/" . $started["job_id"]);
} while (!in_array($job["status"], ["succeeded", "failed"]));
if ($job["status"] === "failed") {
throw new Exception($job["error"] ?? "run failed");
}
$raw = is_array($job["output"]) ? ($job["output"]["output"] ?? $job["output"]) : $job["output"];
$review = is_string($raw) ? json_decode($raw, true) : $raw;
echo "{$review['review_name']} [{$review['verdict_level']}]: {$review['verdict']}\n";
foreach ($review["health"] as $a) {
echo " [{$a['status']}] {$a['area']}: {$a['note']}\n";
}
foreach ($review["findings"] as $f) {
echo " ({$f['severity']}) {$f['category']}: {$f['title']}\n";
if ($f["fix_code"] !== "") { echo " {$f['fix_code']}\n"; }
}
foreach ($review["checklist"] as $item) {
echo " [{$item['status']}] {$item['item']}: {$item['note']}\n";
}
foreach ($review["coverage_check"] as $c) {
echo " {$c['id']}: " . ($c["addressed"] ? "ok" : "SET ASIDE") . "\n";
}
file_put_contents($review["rewrite"]["filename"], $review["rewrite"]["code"]); // Refined.tsx
var started = await SkillSafe.ApiAsync(HttpMethod.Post, "/run", payload);
var jobId = started.GetProperty("job_id").GetString();
JsonElement job;
while (true)
{
job = await SkillSafe.ApiAsync(HttpMethod.Get, $"/jobs/{jobId}");
var status = job.GetProperty("status").GetString();
if (status is "succeeded" or "failed") break;
await Task.Delay(1500);
}
var rawText = job.GetProperty("output").GetProperty("output").GetString();
using var doc = JsonDocument.Parse(rawText!);
var review = doc.RootElement;
Console.WriteLine($"{review.GetProperty("review_name")} " +
$"[{review.GetProperty("verdict_level")}]: {review.GetProperty("verdict")}");
foreach (var a in review.GetProperty("health").EnumerateArray())
{
Console.WriteLine($" [{a.GetProperty("status")}] {a.GetProperty("area")}: {a.GetProperty("note")}");
}
foreach (var f in review.GetProperty("findings").EnumerateArray())
{
Console.WriteLine($" ({f.GetProperty("severity")}) {f.GetProperty("category")}: " +
$"{f.GetProperty("title")}");
}
foreach (var c in review.GetProperty("checklist").EnumerateArray())
{
Console.WriteLine($" [{c.GetProperty("status")}] {c.GetProperty("item")}: {c.GetProperty("note")}");
}
var rewrite = review.GetProperty("rewrite");
await File.WriteAllTextAsync(rewrite.GetProperty("filename").GetString()!, // Refined.tsx
rewrite.GetProperty("code").GetString()!);
The model is asked for one JSON object and nothing else, but a stray code fence or preamble
is always possible. Strip a leading ```json fence, take the text between the
first { and the last }, and only then parse — that is what
the app does before it falls back to a retry_note reformat run.
The review object — output schema
One JSON object, always the same shape. Every array is present (findings is
empty only if genuinely nothing applies); health always has exactly the five
areas, checklist always has exactly the twelve items, and
rewrite.code is never empty. If the paste was too thin to review responsibly,
you still get this object: what is there gets reviewed, the verdict says the
paste is thin, and what you would need to show lands in next_steps. If the
paste is not React at all, you still get the object — one high-severity finding
explaining what arrived, every health area at risk, every checklist item at
na, and a rewrite.code block of // comments saying what
to paste instead. A paste spanning several files keeps its // components/...
file-name comment headers, and each one is refined in place.
| Field | Type | Meaning |
|---|---|---|
review_name | string | A short name for the review, taken from the code's own domain naming — its component, hook or file names. |
verdict_level | string | sound (nothing material found), refactor (findings exist but are medium/low or only bite at scale) or rework (a high finding means the component is broken as pasted — row state attaching to the wrong item, an effect looping or leaking, state mutated in place so React never re-renders, a hook called conditionally, data loaded with no cancellation or error path). |
verdict | string | One or two sentences: the overall state and the single most important change. |
overview | string | One or two paragraphs: what this React code does, and the pattern behind what was found. |
health | array of 5 | {area, status, note} — the five areas listed below, each exactly once. status is good (nothing material), risk (works, with caveats) or bad (a high-severity finding lives here). Each note references something concrete in the pasted code; an area the paste does not exercise at all is good with a note saying so, unless its absence is itself the risk (a component that renders remote data with no loading or error branch in sight), which is risk with the reason. An area a high finding touches is never good. |
findings | array | {severity, category, title, detail, fix_code}. severity is high (a real defect in the code as pasted — index keys over a list that reorders or filters, a useEffect that reads a prop but declares an empty dependency array, an effect that subscribes or fetches with no cleanup, state mutated in place, a hook called inside a condition or loop, an async function passed directly to useEffect, derived state written back by an effect, a click handler on a div) | medium (works today but degrades or misleads — application data loaded by a raw useEffect + fetch with no cache or error path, useMemo/useCallback sprayed where nothing measurable is saved, a client component that could have stayed on the server, a reusable component owning a copy of state the caller supplies, a form with no pending or error surface, unstable inline object props into a memoized child) | low (polish — naming drift, a component that would read better split, prop-type or TypeScript looseness, minor structure); category is state, hooks, effects, rendering, performance, composition, boundaries, forms, data, accessibility, structure or naming. detail quotes the component, hook, prop or expression it concerns; fix_code is corrected JSX/TSX in your own naming and style, or an empty string when the finding is a question or trade-off rather than a mechanical fix. |
checklist | array of 12 | {item, status, note} — the twelve items listed below, each exactly once and in order. status is pass (the paste shows it handled), fail (the paste shows it mishandled — a finding backs this) or na (the paste gives no evidence either way — no form, no server boundary, no list). The note says what was seen or what is missing. |
coverage_check | array | {id, addressed, note} — one entry per prescan_facts item you sent (ap:index-key, ap:fetch-in-effect, i:component:Dashboard, …), saying where the review covers it or why it was set aside (a keyword hit can be a false positive — an index key over a static list that never reorders is harmless, and a useEffect that genuinely synchronizes with something outside React is correct usage; the note says so). Nothing you flagged is silently dropped. |
rewrite | object | {filename, code} — filename is normally Refined.tsx (unless the paste's own file-name headers suggest a better name), and code is your own code refined: same components, same intent, findings fixed — data loading moved out of a raw effect, effects given honest dependencies and cleanup, list rows keyed by stable ids, state updates made immutable, derived values computed during render instead of stored, hooks lifted to the top level, reusable pieces given hoisted state, interactive elements made semantic and labeled. Your naming, domain vocabulary and comments are preserved, and it is a complete replacement for what you pasted, not a fragment. |
next_steps | string[] | Ordered and concrete: move the order load into a useOrders hook, key the list on order.id, add customerId to the effect's dependency array and abort the request on cleanup, and so on. |
summary | string | 3–5 sentences a code reviewer could paste into a PR review. |
The five health areas, in order, spelled exactly like this:
| area | What its note covers |
|---|---|
State & data flow | State lives at the lowest component that needs it and is lifted no higher than necessary; props flow down rather than being mirrored into local state; derived values are computed during render instead of stored and re-synced; updates are immutable; context is used for genuinely shared concerns rather than as a prop-drilling shortcut; server data is not confused with client state. |
Hooks & effects | Hooks are called unconditionally at the top level of a component or custom hook; dependency arrays are honest and complete; every effect that subscribes, times, observes or fetches returns a cleanup; effects synchronize with something outside React rather than orchestrating renders; async work is wrapped inside the effect, never passed to it; custom hooks encapsulate the reusable behaviour. |
Rendering & performance | List rows carry stable, item-derived keys so React reuses the right node; long lists are windowed or paged where size demands it; memoization (memo, useMemo, useCallback) appears where it provably pays and its dependencies are stable; inline object and function props do not defeat a memoized child; expensive work is not repeated on every render. |
Composition & reuse | Large components split into focused, testable pieces; behaviour is extracted into custom hooks rather than duplicated; reusable components hoist state to the caller and stay controlled where it matters; composition and children are preferred over boolean prop explosions; public prop types are stable and typed. |
Accessibility & semantics | Interactive elements are real button, a and form controls rather than clickable divs; every control has an accessible name; inputs are associated with labels; focus is managed across dialogs and route changes; dangerouslySetInnerHTML and direct DOM manipulation are avoided; images and icons carry sensible alternative text. |
The twelve checklist items, in order, spelled exactly like this:
| item | What its note covers |
|---|---|
State lives at the lowest sufficient level | Each piece of state is owned by the closest component that needs it, lifted only as far as a shared parent requires, and not hoisted into a context or store for convenience. |
Derived values computed during render, not stored | Anything computable from props or existing state is computed in the render body instead of kept in its own useState and re-synced by an effect. |
Hooks called unconditionally at the top level | No hook sits inside an if, a loop, a callback or an early-return branch; the call order is identical on every render. |
Every effect cleans up what it starts | Subscriptions, timers, observers, event listeners and in-flight requests are torn down in the effect's returned cleanup, so nothing leaks or sets state after unmount. |
Application data avoids raw useEffect + fetch | Remote data comes from a query library, a router loader, a server component or a purpose-built hook — something that gives caching, cancellation, loading and error states — rather than an ad-hoc effect. |
List rows carry stable keys | Keys come from the item's own identity, never the array index or a value generated during render, so row state and DOM nodes follow the right item. |
State updates never mutate in place | Arrays and objects in state are replaced with new values rather than pushed, spliced or assigned into, so React sees the change. |
Memoization only where it provably pays | memo, useMemo and useCallback appear where a measurable render cost or a stable identity requires them — not sprayed across cheap components where they only add work. |
Server/client boundaries respected | Where the target is rsc: "use client" is pushed to the leaves that truly need interactivity, server components stay on the server, and nothing non-serializable crosses the boundary. On other targets this item is na, not fail. |
Forms surface pending and error states | Submissions disable or otherwise reflect their pending state, failures are shown to the user rather than swallowed, and inputs stay consistently controlled or uncontrolled. |
Reusable components hoist state to the caller | Shared components take value and change-handler props instead of owning a private copy of what the caller supplies, so the caller stays the source of truth. |
Interactive elements are semantic and labeled | Clicks land on button/a/form controls, each has an accessible name, and inputs are tied to labels — no onClick on a bare div. |
A small, realistic result for the Orders.tsx paste above, trimmed for length:
{
"review_name": "Orders - customer order list",
"verdict_level": "rework",
"verdict": "'Orders' loads its data with a raw useEffect + fetch that ignores 'customerId' and
never cancels, and it keys rows by array index; fix the data load and the keys
before this list grows a filter or a delete button.",
"overview": "A single client component that fetches a customer's orders on mount and renders them
as a list. The intent is clear and the state shape is right - one array, replaced
wholesale by 'setOrders' - but everything about how that array arrives is wrong.
The effect closes over the first 'customerId' and declares no dependencies, so a
changed prop never refetches; it returns no cleanup, so a slow response sets state
on an unmounted component; and there is no loading or error branch, so a failed
request renders an empty list indistinguishable from a customer with no orders.
The index keys are the same class of latent bug: harmless today, wrong the moment
a row is removed or reordered.",
"health": [
{ "area": "State & data flow", "status": "risk",
"note": "'orders' is correctly owned by the only component that renders it and is replaced
rather than mutated, but it is populated from an effect that never re-runs for a
new 'customerId', so the state can silently belong to a different customer." },
{ "area": "Hooks & effects", "status": "bad",
"note": "The effect reads 'customerId' but declares '[]', returns no cleanup for the
in-flight request, and has no '.catch' - three defects in eight lines." },
{ "area": "Rendering & performance", "status": "risk",
"note": "'key={i}' ties each row to its position, so any removal or reorder makes React
reuse the wrong node; nothing else here is expensive at this size." },
{ "area": "Composition & reuse", "status": "risk",
"note": "Fetching, state and markup sit in one component; there is no 'useOrders' hook and
no presentational list that could be rendered from fixtures in a test." },
{ "area": "Accessibility & semantics", "status": "good",
"note": "A plain 'ul'/'li' list of text - correct semantics, and nothing interactive that
would need a label yet." }
],
"findings": [
{ "severity": "high", "category": "effects",
"title": "The effect reads customerId but declares an empty dependency array",
"detail": "'useEffect(..., [])' captures the first 'customerId' forever; when the prop
changes the list keeps showing the previous customer's orders. It also returns
no cleanup, so a response arriving after unmount calls 'setOrders' anyway.",
"fix_code": "useEffect(() => {\n const controller = new AbortController();\n fetch(\"/api/orders?customer=\" + customerId, { signal: controller.signal })\n .then((r) => r.json())\n .then(setOrders)\n .catch(() => {});\n return () => controller.abort();\n}, [customerId]);" },
{ "severity": "high", "category": "rendering",
"title": "List rows are keyed by array index",
"detail": "'orders.map((o, i) => <li key={i}>' keys each row by position. Remove or reorder
one order and React reuses the wrong DOM node - row-local state, focus and
animations follow the index, not the order.",
"fix_code": "{orders.map((o) => (\n <li key={o.id}>{o.total}</li>\n))}" },
{ "severity": "medium", "category": "data",
"title": "Application data is loaded with a raw useEffect + fetch",
"detail": "The order list has no cache, no deduplication, no retry, no loading state and no
error state. Every mount refetches, and a failure renders an empty list that
looks exactly like a customer with no orders.",
"fix_code": "const { data: orders = [], isPending, error } = useQuery({\n queryKey: [\"orders\", customerId],\n queryFn: ({ signal }) =>\n fetch(\"/api/orders?customer=\" + customerId, { signal }).then((r) => r.json()),\n});" },
{ "severity": "low", "category": "composition",
"title": "Data loading and presentation live in one component",
"detail": "'Orders' owns the fetch, the state and the markup, so the list cannot be rendered
from fixtures in a test and the loading behaviour cannot be reused.",
"fix_code": "" }
],
"checklist": [
{ "item": "State lives at the lowest sufficient level", "status": "pass",
"note": "'orders' is owned by the only component that renders it." },
{ "item": "Derived values computed during render, not stored", "status": "pass",
"note": "Nothing derived is held in state; the list renders straight from 'orders'." },
{ "item": "Hooks called unconditionally at the top level", "status": "pass",
"note": "'useState' and 'useEffect' both run at the top of the component body." },
{ "item": "Every effect cleans up what it starts", "status": "fail",
"note": "The fetch effect returns nothing; an in-flight request still calls 'setOrders'." },
{ "item": "Application data avoids raw useEffect + fetch", "status": "fail",
"note": "The orders are loaded by 'useEffect' + 'fetch' with no cache or error path." },
{ "item": "List rows carry stable keys", "status": "fail",
"note": "'key={i}' is the array index rather than 'order.id'." },
{ "item": "State updates never mutate in place", "status": "pass",
"note": "'setOrders' replaces the array wholesale." },
{ "item": "Memoization only where it provably pays", "status": "pass",
"note": "No 'useMemo' or 'useCallback' in the paste; at this size none is warranted." },
{ "item": "Server/client boundaries respected", "status": "na",
"note": "target is 'spa', so no server component boundary is in play." },
{ "item": "Forms surface pending and error states", "status": "na",
"note": "No form appears in the paste." },
{ "item": "Reusable components hoist state to the caller", "status": "na",
"note": "'Orders' is a screen-level list, not a reusable primitive." },
{ "item": "Interactive elements are semantic and labeled", "status": "na",
"note": "Nothing interactive appears in the paste." }
],
"coverage_check": [
{ "id": "ap:index-key", "addressed": true,
"note": "Covered by the second finding - rows are re-keyed on 'order.id'." },
{ "id": "ap:fetch-in-effect", "addressed": true,
"note": "Covered by the first and third findings - deps and cleanup fixed, then the load
moved behind a query hook." },
{ "id": "i:component:Orders", "addressed": true,
"note": "The component under review; refined in full in rewrite.code." }
],
"rewrite": { "filename": "Refined.tsx",
"code": "// Orders.tsx\nimport { useOrders } from \"./useOrders\";\n\nexport function Orders({ customerId }: { customerId: string }) {\n const { orders, isPending, error } = useOrders(customerId);\n … }" },
"next_steps": [
"Add 'customerId' to the effect's dependency array and abort the request in its cleanup.",
"Key the rows on 'order.id' instead of the map index.",
"Move the load into a 'useOrders(customerId)' hook backed by your query library, and render
its pending and error states.",
"Split a presentational 'OrderList({ orders })' out of the screen so it can be tested from
fixtures."
],
"summary": "The state shape is right and the markup is honest, but the data load is wrong in
three ways at once - stale 'customerId', no cancellation, no error path - and the
rows are keyed by index. …"
}
The refined rewrite is a starting point, not a sign-off: it is written to be complete and self-consistent with the findings, but it is AI-generated and it only sees what you pasted. Read it, put it through TypeScript, ESLint with the React Hooks rules and your component tests, and keep the human review in the loop before it goes anywhere near production — a change to a published component's props is a contract change.
Step 5 — Stream the review as it is written
/run-stream takes exactly the same body as /run but answers with
server-sent events, so you can show progress instead of a spinner — useful here
because the refined rewrite makes for a long reply. This app's own progress panel is this
endpoint. Events are separated by a blank line; each has an event: line and a
data: line carrying JSON.
| Event | Payload | Meaning |
|---|---|---|
job | {job_id, status} | Sent once, when the job is accepted — show "starting". |
delta | {text} | A chunk of the reply, in order. Append it; the accumulated length is your only progress signal (the total is not known in advance). |
done | {job_id, status, charged_credits, output} | The final, authoritative result — read the review from output.output rather than trusting concatenated deltas, and the settled price from charged_credits. |
error | {code, message} | Replaces done when the run fails. |
# -N disables buffering so events print as they arrive
curl -N -s -X POST "$API/run-stream" \
-H "Authorization: Bearer $TOKEN" -H "Content-Type: application/json" \
-H "Idempotency-Key: review-$(date +%s)" \
-d @input.json
# event: job
# data: {"job_id":"job_...","status":"running"}
#
# event: delta
# data: {"text":"{\"review_name\":\"Orders"}
# ...
# event: done
# data: {"job_id":"job_...","status":"succeeded","charged_credits":612,"output":{"output":"{...}"}}
import json, requests
result = None
with requests.post(
API + "/run-stream",
headers={"Authorization": f"Bearer {TOKEN}",
"Idempotency-Key": "review-001"},
json=payload,
stream=True,
) as r:
r.raise_for_status()
event = None
for line in r.iter_lines(decode_unicode=True):
if not line:
continue
if line.startswith("event:"):
event = line[len("event:"):].strip()
elif line.startswith("data:"):
data = json.loads(line[len("data:"):].strip())
if event == "delta":
print(".", end="", flush=True) # live progress
elif event == "done":
result = data
elif event == "error":
raise RuntimeError(data.get("message", "run failed"))
review = json.loads(result["output"]["output"]) # authoritative
print("charged:", result["charged_credits"], "-", review["review_name"])
for area in review["health"]:
print(f' [{area["status"]}] {area["area"]}')
open(review["rewrite"]["filename"], "w", encoding="utf-8").write(review["rewrite"]["code"])
const res = await fetch(API + "/run-stream", {
method: "POST",
headers: {
Authorization: `Bearer ${TOKEN}`,
"Content-Type": "application/json",
"Idempotency-Key": crypto.randomUUID(),
},
body: JSON.stringify(payload),
});
const reader = res.body.getReader();
const decoder = new TextDecoder();
let buf = "", done = null;
for (;;) {
const chunk = await reader.read();
if (chunk.done) break;
buf += decoder.decode(chunk.value, { stream: true });
const frames = buf.split("\n\n");
buf = frames.pop();
for (const frame of frames) {
const name = /^event:\s*(.+)$/m.exec(frame)?.[1];
const body = /^data:\s*(.+)$/m.exec(frame)?.[1];
if (!name || !body) continue;
const data = JSON.parse(body);
if (name === "delta") process.stdout.write("."); // live progress
if (name === "done") done = data;
if (name === "error") throw new Error(data.message ?? "run failed");
}
}
const review = JSON.parse(done.output.output);
console.log(`\n${done.charged_credits} credits - ${review.review_name}`);
for (const area of review.health) console.log(` [${area.status}] ${area.area}`);
writeFileSync(review.rewrite.filename, review.rewrite.code); // Refined.tsx
body, _ := json.Marshal(payload)
req, _ := http.NewRequest("POST", API+"/run-stream", bytes.NewReader(body))
req.Header.Set("Authorization", "Bearer "+token)
req.Header.Set("Content-Type", "application/json")
req.Header.Set("Idempotency-Key", "review-001")
res, err := http.DefaultClient.Do(req)
if err != nil {
log.Fatal(err)
}
defer res.Body.Close()
var event string
var final map[string]any
sc := bufio.NewScanner(res.Body)
sc.Buffer(make([]byte, 0, 64*1024), 4*1024*1024)
for sc.Scan() {
line := sc.Text()
switch {
case strings.HasPrefix(line, "event:"):
event = strings.TrimSpace(strings.TrimPrefix(line, "event:"))
case strings.HasPrefix(line, "data:"):
var data map[string]any
json.Unmarshal([]byte(strings.TrimPrefix(line, "data:")), &data)
switch event {
case "delta":
fmt.Print(".") // live progress
case "done":
final = data
case "error":
log.Fatal(data["message"])
}
}
}
// final["output"].(map[string]any)["output"].(string) is the review JSON —
// unmarshal it into the Review struct from step 4, then write review.Rewrite.Code to disk.
// Java 17+ — read the stream line by line instead of buffering the body.
var req = HttpRequest.newBuilder(URI.create(API + "/run-stream"))
.header("Authorization", "Bearer " + TOKEN)
.header("Content-Type", "application/json")
.header("Idempotency-Key", "review-001")
.POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
.build();
var res = HTTP.send(req, HttpResponse.BodyHandlers.ofLines());
String event = null, done = null;
for (String line : (Iterable<String>) res.body()::iterator) {
if (line.startsWith("event:")) {
event = line.substring(6).trim();
} else if (line.startsWith("data:")) {
String data = line.substring(5).trim();
if ("delta".equals(event)) System.out.print("."); // live progress
else if ("done".equals(event)) done = data;
else if ("error".equals(event)) throw new RuntimeException(data);
}
}
// parse `done`, then parse data.output.output again — it is a JSON string holding
// review_name, verdict_level, health[], findings[], checklist[], rewrite{filename, code} and the rest.
require "net/http"
require "json"
uri = URI(API + "/run-stream")
req = Net::HTTP::Post.new(uri)
req["Authorization"] = "Bearer #{TOKEN}"
req["Content-Type"] = "application/json"
req["Idempotency-Key"] = "review-001"
req.body = payload.to_json
event = nil
done = nil
Net::HTTP.start(uri.host, uri.port, use_ssl: true) do |http|
http.request(req) do |res|
res.read_body do |chunk|
chunk.each_line do |line|
line = line.strip
if line.start_with?("event:")
event = line.delete_prefix("event:").strip
elsif line.start_with?("data:")
data = JSON.parse(line.delete_prefix("data:").strip)
case event
when "delta" then print "." # live progress
when "done" then done = data
when "error" then raise (data["message"] || "run failed")
end
end
end
end
end
end
review = JSON.parse(done["output"]["output"])
puts "\n#{done["charged_credits"]} credits - #{review["review_name"]}"
review["health"].each { |a| puts " [#{a["status"]}] #{a["area"]}" }
File.write(review["rewrite"]["filename"], review["rewrite"]["code"]) # Refined.tsx
$event = null;
$done = null;
$ch = curl_init(API . "/run-stream");
curl_setopt_array($ch, [
CURLOPT_POST => true,
CURLOPT_HTTPHEADER => [
"Authorization: Bearer $TOKEN",
"Content-Type: application/json",
"Idempotency-Key: review-001",
],
CURLOPT_POSTFIELDS => json_encode($payload),
CURLOPT_WRITEFUNCTION => function ($ch, $chunk) use (&$event, &$done) {
foreach (explode("\n", $chunk) as $line) {
$line = trim($line);
if (str_starts_with($line, "event:")) {
$event = trim(substr($line, 6));
} elseif (str_starts_with($line, "data:")) {
$data = json_decode(trim(substr($line, 5)), true);
if ($event === "delta") { echo "."; } // live progress
elseif ($event === "done") { $done = $data; }
elseif ($event === "error") { throw new Exception($data["message"] ?? "run failed"); }
}
}
return strlen($chunk);
},
]);
curl_exec($ch);
curl_close($ch);
$review = json_decode($done["output"]["output"], true);
echo "\n{$done['charged_credits']} credits - {$review['review_name']}\n";
foreach ($review["health"] as $a) { echo " [{$a['status']}] {$a['area']}\n"; }
file_put_contents($review["rewrite"]["filename"], $review["rewrite"]["code"]); // Refined.tsx
var req = new HttpRequestMessage(HttpMethod.Post, Api + "/run-stream") {
Content = JsonContent.Create(payload),
};
req.Headers.Add("Idempotency-Key", "review-001");
using var res = await Http.SendAsync(req, HttpCompletionOption.ResponseHeadersRead);
using var reader = new StreamReader(await res.Content.ReadAsStreamAsync());
string? evt = null, done = null;
while (await reader.ReadLineAsync() is { } line)
{
if (line.StartsWith("event:")) evt = line[6..].Trim();
else if (line.StartsWith("data:"))
{
var data = line[5..].Trim();
if (evt == "delta") Console.Write("."); // live progress
else if (evt == "done") done = data;
else if (evt == "error") throw new Exception(data);
}
}
using var final = JsonDocument.Parse(done!);
var text = final.RootElement.GetProperty("output").GetProperty("output").GetString();
using var reviewDoc = JsonDocument.Parse(text!);
var review = reviewDoc.RootElement;
Console.WriteLine(review.GetProperty("review_name"));
foreach (var a in review.GetProperty("health").EnumerateArray())
Console.WriteLine($" [{a.GetProperty("status")}] {a.GetProperty("area")}");
var rewrite = review.GetProperty("rewrite");
await File.WriteAllTextAsync(rewrite.GetProperty("filename").GetString()!, // Refined.tsx
rewrite.GetProperty("code").GetString()!);
In a browser, the native EventSource only speaks GET, and this endpoint is a
POST — read the fetch response body incrementally, as the JavaScript
sample above does. On an idempotent replay the server may answer with a plain JSON
envelope instead of an event stream; check the Content-Type before you start
parsing frames.