packages/forkhorse-dashboard/src/picker.tsx

1import { createRoot } from "react-dom/client";
2import { Select, TooltipProvider } from "@cloudflare/kumo";
3export interface ForkOption {
4  url: string;
5  repoName: string;
6  head: string;
7}
8/** The host retains selection authority; this component renders only the authorized list. */
9export function mountForkPicker(root: HTMLElement, change: (url: string) => void) {
10  const react = createRoot(root);
11  return {
12    render(forks: ForkOption[], value: string | undefined, message: string, loading = false) {
13      react.render(
14        <TooltipProvider>
15          <div className="fork-picker">
16            <Select
17              label="Agent fork"
18              size="sm"
19              placeholder="Choose a fork"
20              value={value ?? null}
21              disabled={loading || !forks.length}
22              loading={loading}
23              items={forks.map((fork) => ({
24                value: fork.url,
25                label: `${fork.repoName} · ${fork.head.slice(0, 7)}`,
26              }))}
27              onValueChange={(url) => {
28                if (url) change(url);
29              }}
30            />
31            <p className="caption muted" role="status">
32              {message}
33            </p>
34          </div>
35        </TooltipProvider>,
36      );
37    },
38    dispose() {
39      react.unmount();
40    },
41  };
42}
43