textarea]:h-auto",
19 |
20 | // Variants based on alignment.
21 | "has-[>[data-align=inline-start]]:[&>input]:pl-2",
22 | "has-[>[data-align=inline-end]]:[&>input]:pr-2",
23 | "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
24 | "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
25 |
26 | // Focus state.
27 | "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
28 |
29 | // Error state.
30 | "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
31 |
32 | className
33 | )}
34 | {...props}
35 | />
36 | )
37 | }
38 |
39 | const inputGroupAddonVariants = cva(
40 | "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
41 | {
42 | variants: {
43 | align: {
44 | "inline-start":
45 | "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
46 | "inline-end":
47 | "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
48 | "block-start":
49 | "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
50 | "block-end":
51 | "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
52 | },
53 | },
54 | defaultVariants: {
55 | align: "inline-start",
56 | },
57 | }
58 | )
59 |
60 | function InputGroupAddon({
61 | className,
62 | align = "inline-start",
63 | ...props
64 | }: React.ComponentProps<"div"> & VariantProps
) {
65 | return (
66 | {
72 | if ((e.target as HTMLElement).closest("button")) {
73 | return
74 | }
75 | e.currentTarget.parentElement?.querySelector("input")?.focus()
76 | }}
77 | {...props}
78 | />
79 | )
80 | }
81 |
82 | const inputGroupButtonVariants = cva(
83 | "text-sm shadow-none flex gap-2 items-center",
84 | {
85 | variants: {
86 | size: {
87 | xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
88 | sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
89 | "icon-xs":
90 | "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
91 | "icon-sm": "size-8 p-0 has-[>svg]:p-0",
92 | },
93 | },
94 | defaultVariants: {
95 | size: "xs",
96 | },
97 | }
98 | )
99 |
100 | function InputGroupButton({
101 | className,
102 | type = "button",
103 | variant = "ghost",
104 | size = "xs",
105 | ...props
106 | }: Omit
, "size"> &
107 | VariantProps) {
108 | return (
109 |
116 | )
117 | }
118 |
119 | function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
120 | return (
121 |
128 | )
129 | }
130 |
131 | function InputGroupInput({
132 | className,
133 | ...props
134 | }: React.ComponentProps<"input">) {
135 | return (
136 |
144 | )
145 | }
146 |
147 | function InputGroupTextarea({
148 | className,
149 | ...props
150 | }: React.ComponentProps<"textarea">) {
151 | return (
152 |
160 | )
161 | }
162 |
163 | export {
164 | InputGroup,
165 | InputGroupAddon,
166 | InputGroupButton,
167 | InputGroupText,
168 | InputGroupInput,
169 | InputGroupTextarea,
170 | }
171 |
--------------------------------------------------------------------------------
/src/components/ui/squares-background.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useRef, useState } from "react";
4 |
5 | interface SquaresProps {
6 | direction?: "right" | "left" | "up" | "down" | "diagonal";
7 | speed?: number;
8 | borderColor?: string;
9 | squareSize?: number;
10 | hoverFillColor?: string;
11 | className?: string;
12 | }
13 |
14 | export function Squares({
15 | direction = "right",
16 | speed = 1,
17 | borderColor = "#333",
18 | squareSize = 40,
19 | hoverFillColor = "#222",
20 | className,
21 | }: SquaresProps) {
22 | const canvasRef = useRef(null);
23 | const requestRef = useRef(undefined);
24 | const numSquaresX = useRef(0);
25 | const numSquaresY = useRef(0);
26 | const gridOffset = useRef({ x: 0, y: 0 });
27 | const [hoveredSquare, setHoveredSquare] = useState<{
28 | x: number;
29 | y: number;
30 | } | null>(null);
31 |
32 | useEffect(() => {
33 | const canvas = canvasRef.current;
34 | if (!canvas) return;
35 |
36 | const ctx = canvas.getContext("2d");
37 | if (!ctx) return;
38 |
39 | // Set canvas background to transparent (let the page background show through)
40 | canvas.style.background = "transparent";
41 |
42 | // Get computed color if using currentColor
43 | const getComputedBorderColor = () => {
44 | if (borderColor === "currentColor") {
45 | return getComputedStyle(canvas).color;
46 | }
47 | return borderColor;
48 | };
49 |
50 | const resizeCanvas = () => {
51 | canvas.width = canvas.offsetWidth;
52 | canvas.height = canvas.offsetHeight;
53 | numSquaresX.current = Math.ceil(canvas.width / squareSize) + 1;
54 | numSquaresY.current = Math.ceil(canvas.height / squareSize) + 1;
55 | };
56 |
57 | window.addEventListener("resize", resizeCanvas);
58 | resizeCanvas();
59 |
60 | const drawGrid = () => {
61 | ctx.clearRect(0, 0, canvas.width, canvas.height);
62 |
63 | const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize;
64 | const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize;
65 |
66 | ctx.lineWidth = 0.5;
67 |
68 | for (let x = startX; x < canvas.width + squareSize; x += squareSize) {
69 | for (let y = startY; y < canvas.height + squareSize; y += squareSize) {
70 | const squareX = x - (gridOffset.current.x % squareSize);
71 | const squareY = y - (gridOffset.current.y % squareSize);
72 |
73 | if (
74 | hoveredSquare &&
75 | Math.floor((x - startX) / squareSize) === hoveredSquare.x &&
76 | Math.floor((y - startY) / squareSize) === hoveredSquare.y
77 | ) {
78 | ctx.fillStyle = hoverFillColor;
79 | ctx.fillRect(squareX, squareY, squareSize, squareSize);
80 | }
81 |
82 | ctx.strokeStyle = getComputedBorderColor();
83 | ctx.strokeRect(squareX, squareY, squareSize, squareSize);
84 | }
85 | }
86 | };
87 |
88 | const updateAnimation = () => {
89 | const effectiveSpeed = Math.max(speed, 0.1);
90 |
91 | switch (direction) {
92 | case "right":
93 | gridOffset.current.x =
94 | (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize;
95 | break;
96 | case "left":
97 | gridOffset.current.x =
98 | (gridOffset.current.x + effectiveSpeed + squareSize) % squareSize;
99 | break;
100 | case "up":
101 | gridOffset.current.y =
102 | (gridOffset.current.y + effectiveSpeed + squareSize) % squareSize;
103 | break;
104 | case "down":
105 | gridOffset.current.y =
106 | (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize;
107 | break;
108 | case "diagonal":
109 | gridOffset.current.x =
110 | (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize;
111 | gridOffset.current.y =
112 | (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize;
113 | break;
114 | }
115 |
116 | drawGrid();
117 | requestRef.current = requestAnimationFrame(updateAnimation);
118 | };
119 |
120 | const handleMouseMove = (event: MouseEvent) => {
121 | const rect = canvas.getBoundingClientRect();
122 | const mouseX = event.clientX - rect.left;
123 | const mouseY = event.clientY - rect.top;
124 |
125 | const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize;
126 | const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize;
127 |
128 | const hoveredSquareX = Math.floor(
129 | (mouseX + gridOffset.current.x - startX) / squareSize
130 | );
131 | const hoveredSquareY = Math.floor(
132 | (mouseY + gridOffset.current.y - startY) / squareSize
133 | );
134 |
135 | setHoveredSquare({ x: hoveredSquareX, y: hoveredSquareY });
136 | };
137 |
138 | const handleMouseLeave = () => {
139 | setHoveredSquare(null);
140 | };
141 |
142 | // Event listeners
143 | window.addEventListener("resize", resizeCanvas);
144 | canvas.addEventListener("mousemove", handleMouseMove);
145 | canvas.addEventListener("mouseleave", handleMouseLeave);
146 |
147 | // Initial setup
148 | resizeCanvas();
149 | requestRef.current = requestAnimationFrame(updateAnimation);
150 |
151 | // Cleanup
152 | return () => {
153 | window.removeEventListener("resize", resizeCanvas);
154 | canvas.removeEventListener("mousemove", handleMouseMove);
155 | canvas.removeEventListener("mouseleave", handleMouseLeave);
156 | if (requestRef.current) {
157 | cancelAnimationFrame(requestRef.current);
158 | }
159 | };
160 | }, [
161 | direction,
162 | speed,
163 | borderColor,
164 | hoverFillColor,
165 | hoveredSquare,
166 | squareSize,
167 | ]);
168 |
169 | return (
170 |
174 | );
175 | }
176 |
--------------------------------------------------------------------------------
/cli/dev.ts:
--------------------------------------------------------------------------------
1 | import { exec, spawn } from "child_process";
2 | import fs from "fs/promises";
3 | import path from "path";
4 | import { fileURLToPath } from "url";
5 |
6 | const __filename = fileURLToPath(import.meta.url);
7 | const __dirname = path.dirname(__filename);
8 |
9 | function openBrowser(url: string) {
10 | const platform = process.platform;
11 | let command: string;
12 |
13 | switch (platform) {
14 | case "darwin": // macOS
15 | command = `open "${url}"`;
16 | break;
17 | case "win32": // Windows
18 | command = `start "" "${url}"`;
19 | break;
20 | default: // Linux and others
21 | command = `xdg-open "${url}"`;
22 | break;
23 | }
24 |
25 | exec(command, (error) => {
26 | if (error) {
27 | console.log(`\n💡 Please open your browser to: ${url}`);
28 | }
29 | });
30 | }
31 |
32 | async function findAvailablePort(startPort: number): Promise {
33 | const net = await import("net");
34 | return new Promise((resolve, reject) => {
35 | const server = net.createServer();
36 | server.unref();
37 | server.on("error", () => {
38 | resolve(findAvailablePort(startPort + 1));
39 | });
40 | server.listen(startPort, () => {
41 | const port = (server.address() as any).port;
42 | server.close(() => {
43 | resolve(port);
44 | });
45 | });
46 | });
47 | }
48 |
49 | export async function devCommand() {
50 | try {
51 | const cwd = process.cwd();
52 |
53 | // Check if dspyground.config.ts exists
54 | const configPath = path.join(cwd, "dspyground.config.ts");
55 | try {
56 | await fs.access(configPath);
57 | } catch {
58 | console.error(
59 | "❌ dspyground.config.ts not found. Run 'npx dspyground init' first."
60 | );
61 | process.exit(1);
62 | }
63 |
64 | // Check if .dspyground/data exists
65 | const dataDir = path.join(cwd, ".dspyground", "data");
66 | try {
67 | await fs.access(dataDir);
68 | } catch {
69 | console.error(
70 | "❌ .dspyground/data directory not found. Run 'npx dspyground init' first."
71 | );
72 | process.exit(1);
73 | }
74 |
75 | console.log("🚀 Starting DSPyGround server...\n");
76 |
77 | // Set environment variables
78 | process.env.DSPYGROUND_DATA_DIR = dataDir;
79 | process.env.DSPYGROUND_CONFIG_PATH = configPath;
80 |
81 | // Find available port
82 | const port = await findAvailablePort(3000);
83 | process.env.PORT = port.toString();
84 |
85 | console.log(`📂 Data directory: ${dataDir}`);
86 | console.log(`⚙️ Config: ${configPath}`);
87 | console.log(`🌐 Server will start on: http://localhost:${port}\n`);
88 |
89 | // Find the dspyground package root
90 | // __dirname is dist/cli, so package root is ../..
91 | const packageRoot = path.join(__dirname, "..", "..");
92 |
93 | // Check for standalone server (production) or src (development)
94 | const standaloneServer = path.join(
95 | packageRoot,
96 | ".next",
97 | "standalone",
98 | "work",
99 | "dspyground",
100 | "server.js"
101 | );
102 | const hasStandalone = await fs
103 | .access(standaloneServer)
104 | .then(() => true)
105 | .catch(() => false);
106 |
107 | const hasSrc = await fs
108 | .access(path.join(packageRoot, "src"))
109 | .then(() => true)
110 | .catch(() => false);
111 |
112 | let command: string;
113 | let args: string[];
114 | let workingDir: string;
115 |
116 | if (hasStandalone) {
117 | // Production mode: run the standalone server
118 | console.log("🚀 Running production server\n");
119 | command = "node";
120 | args = [standaloneServer];
121 | workingDir = path.dirname(standaloneServer);
122 | } else if (hasSrc) {
123 | // Development mode: run next dev (for local development)
124 | console.log("🔧 Running in development mode\n");
125 | command = "npx";
126 | args = ["next", "dev", "-p", port.toString()];
127 | workingDir = packageRoot;
128 | } else {
129 | throw new Error(
130 | "Could not find Next.js app in dspyground package. Package may be corrupted."
131 | );
132 | }
133 |
134 | const child = spawn(command, args, {
135 | cwd: workingDir,
136 | stdio: ["inherit", "pipe", "pipe"],
137 | env: {
138 | ...process.env,
139 | NODE_ENV: hasStandalone ? "production" : "development",
140 | PORT: port.toString(),
141 | HOSTNAME: "0.0.0.0",
142 | },
143 | });
144 |
145 | let browserOpened = false;
146 | const serverUrl = `http://localhost:${port}`;
147 |
148 | // Monitor stdout for server ready signal and pipe output
149 | child.stdout?.on("data", (data) => {
150 | const output = data.toString();
151 | process.stdout.write(output);
152 |
153 | // Open browser when server is ready
154 | if (
155 | !browserOpened &&
156 | (output.includes("Ready in") ||
157 | output.includes("started server on") ||
158 | output.includes("Local:"))
159 | ) {
160 | browserOpened = true;
161 | setTimeout(() => {
162 | console.log(`\n🌐 Opening browser at ${serverUrl}...\n`);
163 | openBrowser(serverUrl);
164 | }, 500);
165 | }
166 | });
167 |
168 | // Pipe stderr
169 | child.stderr?.on("data", (data) => {
170 | process.stderr.write(data);
171 | });
172 |
173 | child.on("error", (error) => {
174 | console.error("❌ Failed to start server:", error);
175 | process.exit(1);
176 | });
177 |
178 | child.on("exit", (code) => {
179 | if (code !== 0) {
180 | console.error(`❌ Server exited with code ${code}`);
181 | process.exit(code || 1);
182 | }
183 | });
184 |
185 | // Handle shutdown gracefully
186 | process.on("SIGINT", () => {
187 | console.log("\n👋 Shutting down...");
188 | child.kill("SIGINT");
189 | process.exit(0);
190 | });
191 |
192 | process.on("SIGTERM", () => {
193 | child.kill("SIGTERM");
194 | process.exit(0);
195 | });
196 | } catch (error) {
197 | console.error("❌ Error starting dev server:", error);
198 | process.exit(1);
199 | }
200 | }
201 |
--------------------------------------------------------------------------------
/src/components/ui/optimize-live-chart.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | /* eslint-disable @typescript-eslint/no-explicit-any */
3 |
4 | import { useEffect, useState } from "react";
5 |
6 | type Point = {
7 | iteration: number;
8 | selected?: number;
9 | best?: number;
10 | avg?: number;
11 | prompt?: string;
12 | };
13 |
14 | export function OptimizeLiveChart(props: {
15 | data: Point[];
16 | finalBest?: number | null;
17 | onSelectPointAction?: (p: Point) => void;
18 | selectedIteration?: number | null;
19 | }) {
20 | const { data, onSelectPointAction, selectedIteration } = props;
21 | const [mod, setMod] = useState(null);
22 |
23 | useEffect(() => {
24 | let active = true;
25 | (async () => {
26 | try {
27 | const m = await import("recharts");
28 | if (active) setMod(m);
29 | } catch {
30 | // ignore load error
31 | }
32 | })();
33 | return () => {
34 | active = false;
35 | };
36 | }, []);
37 |
38 | if (!mod) {
39 | return (
40 |
41 | Loading chart…
42 |
43 | );
44 | }
45 |
46 | const M = mod as any;
47 | const {
48 | LineChart,
49 | Line,
50 | CartesianGrid,
51 | XAxis,
52 | YAxis,
53 | Tooltip,
54 | ResponsiveContainer,
55 | ReferenceDot,
56 | Label,
57 | } = M;
58 |
59 | const fmt = (value: unknown) =>
60 | typeof value === "number" ? value.toFixed(3) : String(value ?? "");
61 |
62 | const CustomTooltip = (props: any) => {
63 | const { active, payload } = props || {};
64 | if (!active || !payload || !Array.isArray(payload) || payload.length === 0)
65 | return null;
66 | const p = (payload[0]?.payload || {}) as Point;
67 | const format = (n: number | undefined) =>
68 | typeof n === "number" ? n.toFixed(3) : "-";
69 | return (
70 |
71 |
Rollout: {p.iteration}
72 |
Point score: {format(p.selected)}
73 |
Best so far: {format(p.best)}
74 |