+
+
+
+
+ );
+}
diff --git a/web/src/components/ResetPassword.tsx b/web/src/components/ResetPassword.tsx
new file mode 100644
index 00000000..38a8c011
--- /dev/null
+++ b/web/src/components/ResetPassword.tsx
@@ -0,0 +1,162 @@
+import { KeyRound, Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { completePasswordReset } from "@/lib/api";
+import { asset } from "@/lib/utils";
+
+/**
+ * Set a new password from the link in a recovery email.
+ *
+ * Reached without a session, so it renders on its own rather than inside
+ * the shell. The three values in the query string are the platform's
+ * signed link: they are handed straight back to the API, which is what
+ * checks them. Nothing here can decide whether a link is good.
+ */
+export function ResetPassword() {
+ const [params, setParams] = useState<{
+ uid: number;
+ expires: number;
+ mac: string;
+ } | null>(null);
+ const [password, setPassword] = useState("");
+ const [confirm, setConfirm] = useState("");
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState
+ ![CCExtractor]({asset("ccx.svg")})
+
+
+ {mode !== "signin" && (
+
+
+
+ Sample Platform
+ CCExtractor regression testing
+ {COPY[mode].title}
+ )}
+
+
+ setEmail(e.target.value)}
+ placeholder="you@example.com"
+ className="mb-3"
+ />
+ {mode === "signin" && (
+ <>
+
+ setPassword(e.target.value)}
+ className="mb-4"
+ />
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+ {sent && (
+
+ {COPY[mode].sent}
+
+ )}
+
+
+ {/* Both links finish on the classic site, which is where accounts are
+ created and passwords are set. */}
+
+ {mode === "signin" ? (
+ <>
+
+ ·
+
+
+ ) : (
+
+ )}
+
+
+ + Use the same account as the CCExtractor Sample Platform. +
+
+
+
+
+ );
+}
diff --git a/web/src/components/ResizeHandle.tsx b/web/src/components/ResizeHandle.tsx
new file mode 100644
index 00000000..1ddc5592
--- /dev/null
+++ b/web/src/components/ResizeHandle.tsx
@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Persisted, draggable width for a pane. Returns the current width and a
+ *
+
+
+
+ {!params && (
+
+
+
+
+ Choose a new password
+
+ CCExtractor Sample Platform
+
+ This link is missing part of itself. Ask for a new one from the sign-in
+ page.
+
+ )}
+
+ {params && !done && (
+ <>
+
+ setPassword(e.target.value)}
+ className="mb-3"
+ />
+
+ setConfirm(e.target.value)}
+ className="mb-4"
+ />
+ {confirm && password !== confirm && (
+
+ The two do not match.
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* The link carries the old password's signature, so using it
+ once is the last thing it can do. */}
+ + This link works once, and stops working as soon as the password + changes. +
+ + )} + + {done && ( + <> +
+ Password changed. You can sign in with it now.
+
+
+
+ )}
+
+
+
+ );
+
+ return { width, handle };
+}
diff --git a/web/src/components/Sparkline.tsx b/web/src/components/Sparkline.tsx
new file mode 100644
index 00000000..b19ad4d4
--- /dev/null
+++ b/web/src/components/Sparkline.tsx
@@ -0,0 +1,24 @@
+import type { SparkResult } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+/** Pass/fail history dots, newest last. */
+export function Sparkline({ results, className }: Readonly<{ results: SparkResult[]; className?: string }>) {
+ if (results.length === 0) {
+ return no runs yet;
+ }
+ return (
+
+ {results.map((r, i) => ({ id: `run-${i}`, r })).map(({ id, r }) => (
+
+ ))}
+
+ );
+}
diff --git a/web/src/components/StatusBadge.tsx b/web/src/components/StatusBadge.tsx
new file mode 100644
index 00000000..6b332210
--- /dev/null
+++ b/web/src/components/StatusBadge.tsx
@@ -0,0 +1,32 @@
+import type { RunStatus } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+/** Colored dot + quiet label; in-flight states pulse. */
+const RUN_STATUS: Record
+
+
+ {title}
+
+
+
+ {body}
+
+
+
+
+
+
+ {children}
+
+
+
+ );
+}
+
+function ProfileSection({ name, email }: Readonly<{ name: string; email: string }>) {
+ const qc = useQueryClient();
+ const [draftName, setDraftName] = useState(name);
+ const [draftEmail, setDraftEmail] = useState(email);
+ const [current, setCurrent] = useState("");
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useStateYour account
++ {me ? ( + <> + Signed in as {me.email} ·{" "} + {me.role} + + ) : ( + "Loading your details…" + )} +
+ + {isLoading && } + {me && ( +
+
+ )}
+
+
+ setDraftName(e.target.value)} maxLength={50} />
+
+
+ setDraftEmail(e.target.value)}
+ />
+
+ {emailChanged && (
+
+ setCurrent(e.target.value)}
+ placeholder="required to change your email"
+ />
+
+ )}
+
+
+
+ {saved && !dirty && Saved.}
+ {error && {error}}
+
+
+
+ setCurrent(e.target.value)}
+ />
+
+
+ setNext(e.target.value)}
+ />
+
+
+ setConfirm(e.target.value)}
+ />
+
+ {/* The minimum length lives in the platform's config, so the server
+ is the one that reports it rather than a number copied here. */}
+
+
+
+ {mismatch && (
+ The two do not match.
+ )}
+ {done && !current && !next && (
+
+ Password changed. This session stays signed in.
+
+ )}
+ {error && {error}}
+
+
+ {isLoading && }
+ {data && (
+ <>
+
+ + {data.linked ? ( + <> + Connected as{" "} + @{data.github_login}. + Runs on your own forks and pull requests use this. + + ) : ( + <> + Not connected. Connecting lets the platform queue runs for your own + forks and pull requests. + + )} +
+ {error &&{error}
}
+ {data.linked ? (
+
+ ) : (
+
+
+
+ )}
+ {/* The redirect finishes on the classic site, so this page will
+ not know about it until it is loaded again. */}
+ + {data.linked + ? "Disconnecting only forgets the platform's copy. Withdraw the authorisation itself from your GitHub applications page." + : "GitHub opens in a new tab. Reload this page once you are done there."} +
+ + )} +
+
+ + Your name and email are replaced with a placeholder and the password is scrambled. + The account itself stays so the samples and runs you own keep an author. +
+ {error &&{error}
}
+
+
+ {children}
+
+ );
+}
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
new file mode 100644
index 00000000..18a3a5a7
--- /dev/null
+++ b/web/tsconfig.app.json
@@ -0,0 +1,33 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM"],
+ "module": "esnext",
+ "types": ["vite/client"],
+ "allowArbitraryExtensions": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Paths */
+ "paths": {
+ "@/*": ["./src/*"]
+ },
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 00000000..1ffef600
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 00000000..8455dcbc
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023"],
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "module": "nodenext",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 00000000..20c1198b
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,24 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+ server: {
+ port: 5173,
+ proxy: {
+ // Flask dev server (mod_api blueprint at /api/v1)
+ "/api": {
+ target: "http://localhost:5001",
+ changeOrigin: true,
+ },
+ },
+ },
+});