chore: dev dep @playwright/test

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-09-22 08:32:40 +03:00
parent ac4cbdd9e6
commit ee4a88e499
13 changed files with 228 additions and 4 deletions
@@ -0,0 +1,11 @@
+"use client";
+export function ExportButtons({ oul, title }: { oul: string; title: string }) {
+  const copy = async () => {
+    const sql = [...document.querySelectorAll<HTMLElement>("#report pre.sql")].map((p) => p.textContent).join("\n\n");
+    await navigator.clipboard.writeText(`${title}\n\n${sql || oul}`);
+  };
+  return <div className="toolbar no-print" style={{ display: "flex", gap: "var(--qai-space-s)" }}>
+    <button className="btn" onClick={copy}>Copy</button>
+    <button className="btn" onClick={() => window.print()}>Export to PDF</button>
+  </div>;
+}
@@ -0,0 +1,30 @@
+"use client";
+import { rename, remove } from "@/lib/actions";
+
+export function HistoryItem({ row }: { row: { id: string; title: string; status: string; created_at: number } }) {
+  // The server actions take (previousState, formData) for useActionState; a plain <form action> passes only
+  // formData, so bind the unused slot here rather than duplicating two single-arg actions.
+  const doRename = (fd: FormData) => rename(null, fd);
+  const doRemove = (fd: FormData) => remove(null, fd);
+  const when = new Date(row.created_at).toLocaleString(undefined,
+    { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  return <li className="card" style={{ padding: "var(--qai-space-md)", display: "grid", gap: "var(--qai-space-s)" }}>
+    <a href={`/app/${row.id}`} style={{ color: "var(--qai-ink)", textDecoration: "none", fontSize: "var(--qai-text-sm)" }}>
+      {row.title}{row.status !== "done" && <span className="pill" style={{ marginInlineStart: 8 }}>{row.status}</span>}
+    </a>
+    <div style={{ display: "flex", gap: "var(--qai-space-s)", alignItems: "center", flexWrap: "wrap" }}>
+      <span className="label">{when}</span>
+      <form action={doRename} style={{ display: "flex", gap: 4, marginLeft: "auto" }}>
+        <input type="hidden" name="id" value={row.id} />
+        <input className="field" name="title" aria-label="New name" defaultValue={row.title}
+               style={{ width: 90, padding: "4px 6px" }} />
+        <button className="btn" style={{ padding: "4px 8px" }}>Save</button>
+      </form>
+      {/* Delete is the only destructive action in the product: it never fires on a stray click. */}
+      <form action={doRemove} onSubmit={(e) => { if (!confirm("Delete this analysis?")) e.preventDefault(); }}>
+        <input type="hidden" name="id" value={row.id} />
+        <button className="btn" style={{ padding: "4px 8px" }}>Delete</button>
+      </form>
+    </div>
+  </li>;
+}
@@ -0,0 +1,15 @@
+import { listAnalyses } from "@/lib/db";
+import { HistoryItem } from "./history-item";
+
+export function Rail({ userId }: { userId: string }) {
+  const rows = listAnalyses(userId);
+  return <>
+    <a href="/app" className="label" style={{ textDecoration: "none", color: "var(--qai-accent)" }}>qAI</a>
+    <p className="label">History · {rows.length}</p>
+    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: "var(--qai-space-s)" }}>
+      {rows.map((r) => <HistoryItem key={r.id} row={r} />)}
+    </ul>
+    <p className="label" style={{ marginTop: "auto" }}>
+      <a href="/settings" style={{ color: "var(--qai-ink-muted)" }}>Settings</a></p>
+  </>;
+}
@@ -0,0 +1,8 @@
+"use client";
+import { Renderer } from "@openuidev/react-lang";
+import { library } from "@/lib/report-ui";
+
+export function ReportView({ oul, streaming }: { oul: string; streaming: boolean }) {
+  if (!oul) return null;
+  return <Renderer response={oul} library={library} isStreaming={streaming} />;
+}
@@ -0,0 +1,74 @@
+"use client";
+import { useState } from "react";
+import { readSse } from "@/lib/stream";
+import { ReportView } from "./report-view";
+import { ExportButtons } from "./export-buttons";
+
+const STAGES = ["digesting", "proposing", "judging", "writing"] as const;
+const LABEL: Record<string, string> = { digesting: "Reading the plan", proposing: "Asking for options",
+  judging: "Jev is scoring", writing: "Writing the report" };
+
+export function Runner() {
+  const [xml, setXml] = useState(""); const [note, setNote] = useState("");
+  const [stage, setStage] = useState<string | null>(null);
+  const [oul, setOul] = useState(""); const [error, setError] = useState<string | null>(null);
+  const at = stage ? STAGES.indexOf(stage as (typeof STAGES)[number]) : -1;
+
+  async function run() {
+    setError(null); setOul(""); setStage("digesting");
+    try {
+      const res = await fetch("/api/analyze", { method: "POST",
+        headers: { "content-type": "application/json" }, body: JSON.stringify({ xml, note }) });
+      if (!res.ok || !res.body) { setError((await res.json().catch(() => null))?.error ?? `Request failed (${res.status}).`);
+        return setStage(null); }
+      for await (const e of readSse(res.body)) {
+        if (e.event === "stage") setStage(e.data.stage);
+        else if (e.event === "oul") setOul((s) => s + e.data.chunk);
+        else if (e.event === "error") setError(`${e.data.stage}: ${e.data.message}`);
+        else if (e.event === "done") { setStage(null); history.replaceState(null, "", `/app/${e.data.id}`); }
+      }
+    } catch (e) {
+      setError((e as Error).message || "The connection to the server dropped.");
+      setStage(null);
+    }
+  }
+
+  return <section style={{ display: "grid", gap: "var(--qai-space-xl)", minWidth: 0 }}>
+    <h1 style={{ fontFamily: "var(--qai-font-display)", fontSize: "var(--qai-text-display)",
+                 letterSpacing: "-0.02em", margin: 0 }}>Paste a plan</h1>
+    <details className="card">
+      <summary style={{ cursor: "pointer", fontFamily: "var(--qai-font-display)", fontSize: "var(--qai-text-sm)" }}>
+        Where do I get this XML?</summary>
+      <ol style={{ fontSize: "var(--qai-text-sm)", color: "var(--qai-ink-muted)", margin: "var(--qai-space-md) 0 0",
+                   paddingLeft: "1.2em" }}>
+        <li>SSMS: press <strong>Ctrl+M</strong> (Include Actual Execution Plan), then run the query.</li>
+        <li>On the Execution Plan tab, right-click → <strong>Save As .sqlplan</strong>. Or right-click the statement → <strong>Showplan XML</strong> and copy the cell.</li>
+        <li>No SSMS: prefix the batch with <code>SET STATISTICS XML ON;</code> and copy the XML result cell.</li>
+        <li>Drop the file or paste its contents below. Only the digest leaves this container, and only to your own models.</li>
+      </ol>
+    </details>
+    <div className="runner card" style={{ display: "grid", gap: "var(--qai-space-md)" }}>
+      <label className="label" htmlFor="xml">ShowPlan XML or .sqlplan contents</label>
+      <textarea className="field" id="xml" rows={7} spellCheck={false} value={xml}
+        onChange={(e) => setXml(e.target.value)} placeholder="<ShowPlanXML …>" />
+      <label className="label" htmlFor="note">Anything the plan cannot see? (optional)</label>
+      <input className="field" id="note" value={note} onChange={(e) => setNote(e.target.value)}
+             placeholder="slow since the 16.0.4085 migration" />
+      <div style={{ display: "flex", gap: "var(--qai-space-s)", alignItems: "center", flexWrap: "wrap" }}>
+        <button className="btn btn-primary" onClick={run} disabled={!xml.trim() || stage !== null}>Analyse</button>
+        <input type="file" accept=".sqlplan,.xml" aria-label="Load a .sqlplan file" style={{ fontSize: "var(--qai-text-xs)" }}
+          onChange={async (e) => {
+            const f = e.target.files?.[0]; if (!f) return;
+            const buf = new Uint8Array(await f.arrayBuffer());
+            // SSMS saves UTF-16LE; File.text() decodes that as UTF-8 and fills the plan with NUL bytes.
+            const utf16 = buf[0] === 0xff && buf[1] === 0xfe;
+            setXml(new TextDecoder(utf16 ? "utf-16le" : "utf-8").decode(buf).replace(/^/, ""));
+          }} />
+        {at >= 0 && <span className="pill" aria-live="polite">{at + 1} of 4 · {LABEL[STAGES[at]]}</span>}
+      </div>
+      {error && <p role="alert" style={{ color: "var(--qai-danger)", margin: 0 }}>{error}</p>}
+    </div>
+    {oul && <ExportButtons oul={oul} title={note || "Query plan analysis"} />}
+    <ReportView oul={oul} streaming={stage !== null} />
+  </section>;
+}
@@ -25,7 +25,9 @@ export function SettingsForm({ action, view, step, account }: {
      {F("analyst_key", "API key", "", view.has_analyst
        ? `Saved ${view.analyst_key_masked} — leave blank to keep it` : "Encrypted with APP_SECRET before it hits disk")}
      {F("analyst_model", "Model name", view.analyst_model, "e.g. gpt-4o-mini, llama-3.3-70b")}
-      {F("analyst_extra", "Extra params (JSON)", view.analyst_extra, 'Merged into the request body, e.g. {"temperature":0.2}')}
+      {F("analyst_extra", "Extra params (JSON)", view.analyst_extra,
+        'Merged into the request body, e.g. {"temperature":0.2}. Reasoning models stream thinking, not the answer: '
+        + 'vLLM/Qwen needs {"chat_template_kwargs":{"enable_thinking":false}} or the report arrives empty.')}
    </Group>
    <Group title="Jev — TypeSafe System One">
      {F("jev_key", "TypeSafe API key", "", view.has_jev
@@ -0,0 +1,12 @@
+export function VerdictSummary({ verdict }: { verdict: any }) {
+  const win = verdict.order.find((o: any) => o.key === verdict.headline) ?? verdict.order[0];
+  return <section className="card" data-verdict>
+    <p className="label">Jev verdict · {verdict.source === "jev"
+      ? `chosen, confidence ${verdict.jev_confidence.toFixed(2)}` : "composite order — Jev did not decide"}</p>
+    <p style={{ fontFamily: "var(--qai-font-display)", fontSize: "var(--qai-text-lg)" }}>{win?.key}</p>
+    <p className="label">weights {Object.entries(verdict.weights as Record<string, number>)
+      .map(([k, v]) => `${k} ${v}`).join(" · ")}</p>
+    {Array.isArray(verdict.flags) && verdict.flags.length > 0
+      && <p style={{ color: "var(--qai-warn)" }}>{verdict.flags.join(" · ")}</p>}
+  </section>;
+}