ahmed mohammedandClaude Opus 4.7
ac4cbdd9e6
Adds @openuidev/lang-core (one-line reason: the prompt-side library must build in a non-React Node runtime; react-lang's createContext crashes the route's server bundle). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
86 lines
4.7 KiB
TypeScript
86 lines
4.7 KiB
TypeScript
import { createElement as el } from "react";
|
|
import { defineComponent, createLibrary } from "@openuidev/react-lang";
|
|
import { specs } from "./report-spec.ts";
|
|
|
|
// Props, descriptions and the prompt come from lib/report-spec.ts (React-free, usable in the API route).
|
|
// This file only says what each component looks like. Names and schemas cannot drift: they are imported.
|
|
// No JSX here either — `node --test` imports modules and Node does not strip JSX.
|
|
const p = (style: Record<string, string | number>, ...kids: any[]) => el("p", { style }, ...kids);
|
|
const muted = { color: "var(--qai-ink-muted)" };
|
|
const small = { fontSize: "var(--qai-text-xs)", color: "var(--qai-ink-muted)" };
|
|
const disp = { fontFamily: "var(--qai-font-display)" };
|
|
|
|
const renderers: Record<string, (x: any) => any> = {
|
|
Headline: ({ props }) => el("header", null,
|
|
el("p", { className: "label" }, props.severity === "critical" ? "Critical" : props.severity === "warning" ? "Warning" : "Note"),
|
|
el("h2", { style: { ...disp, fontSize: "var(--qai-text-2xl)", margin: "var(--qai-space-s) 0" } }, props.title),
|
|
props.subtitle ? p(muted, props.subtitle) : null),
|
|
|
|
Metric: ({ props }) => el("div", { className: "card" },
|
|
el("p", { className: "label" }, props.label),
|
|
p({ ...disp, fontSize: "var(--qai-text-xl)" }, props.value),
|
|
props.note ? p(small, props.note) : null),
|
|
|
|
MetricGrid: ({ props, renderNode }: any) => el("div", { className: "grid-metrics" }, renderNode(props.items)),
|
|
|
|
Finding: ({ props }) => el("div", { className: "card" },
|
|
el("p", { className: "label" }, props.where),
|
|
p({ margin: "var(--qai-space-s) 0" }, el("strong", null, props.issue)),
|
|
el("p", { className: "sql" }, props.evidence),
|
|
p(muted, props.impact)),
|
|
|
|
Findings: ({ props, renderNode }: any) => el("section", { className: "report" }, renderNode(props.items)),
|
|
|
|
Step: ({ props }) => el("li", { className: "card", style: { display: "flex", gap: "var(--qai-space-md)",
|
|
alignItems: "center", flexWrap: "wrap" } },
|
|
el("span", { style: { flex: "1 1 200px", minWidth: 0 } }, props.text),
|
|
props.effort ? el("span", { className: "pill" }, `effort ${props.effort}`) : null,
|
|
props.owner ? el("span", { className: "pill" }, props.owner) : null,
|
|
props.changeControl ? el("span", { className: "pill" }, "change control") : null),
|
|
|
|
StepList: ({ props, renderNode }: any) => el("section", null,
|
|
el("h3", { style: disp }, props.title),
|
|
el("ol", { style: { listStyle: "none", padding: 0, margin: 0, display: "grid", gap: "var(--qai-space-md)" } },
|
|
renderNode(props.steps))),
|
|
|
|
SqlBlock: ({ props }) => el("figure", { className: "card", style: { margin: 0 } },
|
|
el("figcaption", { className: "label" }, props.title),
|
|
el("pre", { className: "sql" }, props.sql),
|
|
el("button", { className: "btn no-print", onClick: () => navigator.clipboard.writeText(props.sql) }, "Copy SQL"),
|
|
props.caption ? el("p", { style: small }, props.caption) : null),
|
|
|
|
ScoreBar: ({ props }) => el("div", null,
|
|
el("p", { className: "label" }, props.label + (props.confidence !== undefined
|
|
? ` · confidence ${props.confidence.toFixed(2)}` : " · no confidence reported")),
|
|
el("div", { className: "bar", style: { width: `${Math.round(props.value * 100)}%` } }),
|
|
props.note ? el("p", { style: small }, props.note) : null),
|
|
|
|
OptionRow: ({ props }) => el("tr", { "data-headline": props.headline || undefined },
|
|
el("td", null, String(props.rank)), el("td", null, props.title),
|
|
el("td", { className: "sql" }, props.composite.toFixed(2)),
|
|
el("td", null, props.flags || "—")),
|
|
|
|
OptionTable: ({ props, renderNode }: any) => el("section", { className: "card" },
|
|
el("h3", { style: disp }, props.title),
|
|
el("p", { style: small }, props.weights),
|
|
el("table", { style: { width: "100%", borderCollapse: "collapse" } }, el("tbody", null, renderNode(props.rows)))),
|
|
|
|
VerdictBlock: ({ props }) => el("section", { className: "card", "data-verdict": "" },
|
|
el("p", { className: "label" }, "First move · " + (props.source === "jev"
|
|
? `Jev, confidence ${props.confidence.toFixed(2)}` : "composite order — Jev did not decide")),
|
|
p({ ...disp, fontSize: "var(--qai-text-lg)" }, props.headline),
|
|
p({}, props.why)),
|
|
|
|
Callout: ({ props }) => el("div", { className: "card", "data-level": props.level,
|
|
role: props.level === "danger" ? "alert" : "note" },
|
|
el("p", null, el("strong", null, props.title)), el("p", null, props.text)),
|
|
|
|
Report: ({ props, renderNode }: any) => el("div", { className: "report", id: "report" }, renderNode(props.blocks)),
|
|
};
|
|
|
|
export const library = createLibrary({
|
|
root: "Report",
|
|
components: specs.map((s) => defineComponent({ name: s.name, props: s.props, description: s.description,
|
|
component: renderers[s.name] })),
|
|
});
|