querysub 0.459.0 → 0.461.0

package/src/deployManager/components/Tools.tsx

@@ -0,0 +1,165 @@
+import preact from "preact";
+import { SocketFunction } from "socket-function/SocketFunction";
+import { qreact } from "../../4-dom/qreact";
+import { css } from "typesafecss";
+import { t } from "../../2-proxy/schema2";
+import { Querysub } from "../../4-querysub/QuerysubController";
+import { MachineServiceController, ServiceConfig } from "../machineSchema";
+import { MachinePicker } from "./MachinePicker";
+import { isDefined } from "../../misc";
+
+module.hotreload = true;
+
+type ToolEntry = {
+    key: string;
+    title: string;
+    render: () => preact.ComponentChild;
+};
+
+export class Tools extends qreact.Component {
+    state = t.state({
+        expanded: t.atomic<boolean>(false),
+        expandedTools: t.lookup(t.boolean),
+    });
+
+    render() {
+        let tools: ToolEntry[] = [
+            {
+                key: "rename-machine",
+                title: "Rename Machine",
+                render: () => <RenameMachine />,
+            },
+        ];
+
+        return <div className={css.vbox(8)}>
+            <div
+                className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 95)}
+                onClick={() => {
+                    this.state.expanded = !this.state.expanded;
+                }}
+            >
+                <span className={css.boldStyle}>{this.state.expanded ? "▼" : "▶"} Tools</span>
+            </div>
+            {this.state.expanded && <div className={css.vbox(6).paddingLeft(12)}>
+                {tools.map(tool => {
+                    let isExpanded = !!this.state.expandedTools[tool.key];
+                    return <div className={css.vbox(6)} key={tool.key}>
+                        <div
+                            className={css.pad2(10, 6).button.bord2(0, 0, 20).hsl(0, 0, 98)}
+                            onClick={() => {
+                                if (this.state.expandedTools[tool.key]) {
+                                    delete this.state.expandedTools[tool.key];
+                                } else {
+                                    this.state.expandedTools[tool.key] = true;
+                                }
+                            }}
+                        >
+                            <span>{isExpanded ? "▼" : "▶"} {tool.title}</span>
+                        </div>
+                        {isExpanded && <div className={css.pad2(10).bord2(0, 0, 20).hsl(0, 0, 100)}>
+                            {tool.render()}
+                        </div>}
+                    </div>;
+                })}
+            </div>}
+        </div>;
+    }
+}
+
+class RenameMachine extends qreact.Component {
+    state = t.state({
+        fromMachineId: t.string,
+        toMachineId: t.string,
+        isRunning: t.atomic<boolean>(false),
+        resultMessage: t.string,
+        errorMessage: t.string,
+    });
+
+    render() {
+        let controller = MachineServiceController(SocketFunction.browserNodeId());
+
+        let { fromMachineId, toMachineId } = this.state;
+        let canRun = !!fromMachineId && !!toMachineId && fromMachineId !== toMachineId && !this.state.isRunning;
+
+        return <div className={css.vbox(10)}>
+            <div className={css.colorhsl(0, 0, 40)}>
+                Rewrites every service config: any occurrence of "From" in its <code>machineIds</code> becomes "To".
+            </div>
+            <MachinePicker
+                label="From"
+                singleOption
+                picked={fromMachineId ? [fromMachineId] : []}
+                addPicked={(value) => { this.state.fromMachineId = value; }}
+                removePicked={() => { this.state.fromMachineId = ""; }}
+            />
+            <MachinePicker
+                label="To"
+                singleOption
+                picked={toMachineId ? [toMachineId] : []}
+                addPicked={(value) => { this.state.toMachineId = value; }}
+                removePicked={() => { this.state.toMachineId = ""; }}
+            />
+            <div className={css.hbox(8)}>
+                <button
+                    className={css.pad2(12, 8).button.bord2(0, 0, 20)
+                        + (canRun ? css.hsl(0, 0, 100) : css.hsl(0, 0, 85).colorhsl(0, 0, 50))}
+                    disabled={!canRun}
+                    onClick={() => {
+                        if (!canRun) return;
+                        let from = fromMachineId;
+                        let to = toMachineId;
+                        let confirmed = confirm(`Rename machine "${from}" → "${to}" across all service configs?\n\nThis updates every ServiceConfig that references "${from}".`);
+                        if (!confirmed) return;
+
+                        Querysub.commit(() => {
+                            this.state.isRunning = true;
+                            this.state.resultMessage = "";
+                            this.state.errorMessage = "";
+                        });
+
+                        Querysub.onCommitFinished(async () => {
+                            try {
+                                let serviceIds = await controller.getServiceList.promise();
+                                let configs = await Promise.all(
+                                    serviceIds.map(id => controller.getServiceConfig.promise(id))
+                                );
+                                let toUpdate: ServiceConfig[] = [];
+                                for (let config of configs.filter(isDefined)) {
+                                    if (!config.machineIds.includes(from)) continue;
+                                    let newMachineIds = config.machineIds.map(m => m === from ? to : m);
+                                    toUpdate.push({
+                                        ...config,
+                                        machineIds: newMachineIds,
+                                    });
+                                }
+                                if (toUpdate.length === 0) {
+                                    Querysub.commit(() => {
+                                        this.state.resultMessage = `No service configs referenced "${from}".`;
+                                    });
+                                } else {
+                                    await controller.setServiceConfigs.promise(toUpdate);
+                                    Querysub.commit(() => {
+                                        this.state.resultMessage = `Updated ${toUpdate.length} service config(s).`;
+                                    });
+                                }
+                            } catch (err) {
+                                console.error(`RenameMachine failed:`, (err as Error).stack ?? err);
+                                Querysub.commit(() => {
+                                    this.state.errorMessage = (err as Error).stack ?? String(err);
+                                });
+                            } finally {
+                                Querysub.commit(() => {
+                                    this.state.isRunning = false;
+                                });
+                            }
+                        });
+                    }}
+                >
+                    {this.state.isRunning ? "Renaming..." : "Rename"}
+                </button>
+            </div>
+            {this.state.resultMessage && <div className={css.colorhsl(120, 50, 30)}>{this.state.resultMessage}</div>}
+            {this.state.errorMessage && <pre className={css.colorhsl(0, 60, 40).whiteSpace("pre-wrap")}>{this.state.errorMessage}</pre>}
+        </div>;
+    }
+}

package/src/deployManager/setupMachineMain.ts

@@ -12,7 +12,32 @@ Querysub;
 
 const pinnedNodeVersion = 22;
 
-async function getGitHubApiKey(repoUrl: string, sshRemote: string): Promise<string> {
+function getGitHubKeyCachePath(repoUrl: string): string {
+    let repoOwner = "";
+    let repoName = "";
+    const sshMatch = repoUrl.match(/git@github\.com:([^/]+)\/(.+)\.git$/);
+    const httpsMatch = repoUrl.match(/https:\/\/github\.com\/([^/]+)\/(.+)\.git$/);
+    if (sshMatch) {
+        repoOwner = sshMatch[1];
+        repoName = sshMatch[2];
+    } else if (httpsMatch) {
+        repoOwner = httpsMatch[1];
+        repoName = httpsMatch[2];
+    }
+    return os.homedir() + `/githubkey_${repoOwner}_${repoName}.json`;
+}
+
+async function verifyGitHubApiKey(apiKey: string): Promise<boolean> {
+    const response = await fetch("https://api.github.com/user", {
+        headers: {
+            "Authorization": `Bearer ${apiKey}`,
+            "Accept": "application/vnd.github+json"
+        }
+    });
+    return response.ok;
+}
+
+async function getGitHubApiKey(repoUrl: string, sshRemote: string, forceRefresh = false): Promise<string> {
     // Parse repository info from URL
     let repoOwner = "";
     let repoName = "";
@@ -30,15 +55,18 @@ async function getGitHubApiKey(repoUrl: string, sshRemote: string): Promise<stri
         repoName = httpsMatch[2];
     }
 
-    const cacheFile = os.homedir() + `/githubkey_${repoOwner}_${repoName}.json`;
+    const cacheFile = getGitHubKeyCachePath(repoUrl);
 
     // Check if we have a cached key
-    if (await fsExistsAsync(cacheFile)) {
+    if (!forceRefresh && await fsExistsAsync(cacheFile)) {
         try {
             const cached = JSON.parse(fs.readFileSync(cacheFile, "utf8"));
             if (cached.apiKey) {
-                console.log(`✅ Using cached GitHub API key from ${cacheFile}`);
-                return cached.apiKey;
+                if (await verifyGitHubApiKey(cached.apiKey)) {
+                    console.log(`✅ Using cached GitHub API key from ${cacheFile}`);
+                    return cached.apiKey;
+                }
+                console.warn(`⚠️  Cached GitHub API key at ${cacheFile} failed verification (401 Bad credentials) — requesting a new one`);
             }
         } catch {
             // Invalid cache file, we'll ask for a new key
@@ -84,8 +112,6 @@ async function getGitHubApiKey(repoUrl: string, sshRemote: string): Promise<stri
 }
 
 async function addDeployKeyToGitHub(sshPublicKey: string, keyTitle: string, repoUrl: string, sshRemote: string): Promise<void> {
-    const apiKey = await getGitHubApiKey(repoUrl, sshRemote);
-
     // Parse repository info from URL to get owner/repo for the API endpoint
     let repoOwner = "";
     let repoName = "";
@@ -104,26 +130,42 @@ async function addDeployKeyToGitHub(sshPublicKey: string, keyTitle: string, repo
 
     let url = `https://api.github.com/repos/${repoOwner}/${repoName}/keys`;
     console.log(url);
-    const response = await fetch(url, {
-        method: "POST",
-        headers: {
-            "Authorization": `Bearer ${apiKey}`,
-            "Accept": "application/vnd.github+json",
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-            title: keyTitle,
-            key: sshPublicKey,
-            read_only: true
-        })
-    });
 
-    if (!response.ok) {
+    let forceRefresh = false;
+    while (true) {
+        const apiKey = await getGitHubApiKey(repoUrl, sshRemote, forceRefresh);
+        const response = await fetch(url, {
+            method: "POST",
+            headers: {
+                "Authorization": `Bearer ${apiKey}`,
+                "Accept": "application/vnd.github+json",
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                title: keyTitle,
+                key: sshPublicKey,
+                read_only: true
+            })
+        });
+
+        if (response.ok) {
+            console.log("✅ Deploy key added to GitHub repository");
+            return;
+        }
+
         const errorText = await response.text();
+        if (response.status === 401 && !forceRefresh) {
+            console.warn(`⚠️  GitHub API rejected credentials (401). Invalidating cached token and re-prompting.`);
+            try {
+                fs.unlinkSync(getGitHubKeyCachePath(repoUrl));
+            } catch {
+                // Cache file may not exist; ignore
+            }
+            forceRefresh = true;
+            continue;
+        }
         throw new Error(`Failed to add deploy key to GitHub repository: ${response.status} ${errorText}`);
     }
-
-    console.log("✅ Deploy key added to GitHub repository");
 }
 
 async function setupRepositoryOnRemote(sshRemote: string, gitURLLive: string, gitRefLive: string): Promise<void> {
@@ -164,6 +206,15 @@ async function main() {
     // Test command to verify ssh credentials work
     await runPromise(`ssh ${sshRemote} whoami`);
 
+    // Detect Hetzner rescue system — if we're still in rescue, installimage hasn't been run yet
+    let rescueProbe = await runPromise(`ssh ${sshRemote} "hostname; command -v installimage || true"`, { nothrow: true });
+    if (/(^|\n)rescue(\s|$)/i.test(rescueProbe) || /installimage/.test(rescueProbe)) {
+        console.error(`❌ Remote ${sshRemote} appears to be running the Hetzner rescue system (no OS installed yet).`);
+        console.error(`   Run \`installimage\` on the remote first to provision the OS, reboot into the installed system, then re-run \`yarn setup-machine ${sshRemote}\`.`);
+        console.error(`   Detected:\n${rescueProbe.trim()}`);
+        process.exit(1);
+    }
+
     // Setup swap space if not already configured
     console.log("Checking swap configuration...");
     const swapInfo = await runPromise(`ssh ${sshRemote} "free -m | grep Swap"`);

package/src/diagnostics/charts/Chart.tsx

@@ -0,0 +1,240 @@
+import preact from "preact";
+import { qreact } from "../../4-dom/qreact";
+import { css } from "../../4-dom/css";
+import { JSXFormatter, formatValue } from "../../5-diagnostics/GenericFormat";
+import { MeasuredDiv } from "../../library-components/MeasuredDiv";
+
+export type FieldDef = {
+    title?: string;
+    /** If this value is sampled, for example, checking the current CPU usage, disk usage, etc, this field must be set to true. */
+    isSampled?: boolean;
+    isDateType?: boolean;
+    formatter?: JSXFormatter;
+};
+
+export type ChartData<T> = {
+    rows: T[];
+    columns: { [columnName in keyof T]?: FieldDef };
+};
+
+const DEFAULT_BAR_WIDTH_PX = 100;
+const Y_LABEL_TARGET_COUNT = 6;
+const Y_LABEL_MAX_WIDTH_PX = 120;
+const X_LABEL_MAX_WIDTH_PX = 140;
+const X_LABEL_FONT_SIZE_PX = 11;
+const Y_LABEL_FONT_SIZE_PX = 11;
+const GRID_LINE_COLOR = "hsla(0, 0%, 0%, 0.12)";
+const BAR_GAP_PX = 2;
+const BAR_COLOR = "hsl(210, 60%, 55%)";
+const MIN_VISIBLE_BAR_FRAC = 0.005;
+
+function getNiceNumber(num: number): number {
+    if (num <= 0) return 1;
+    let zeros = Math.floor(Math.log10(num));
+    let fraction = num / 10 ** zeros;
+    if (fraction <= 1) fraction = 1;
+    else if (fraction <= 2) fraction = 2;
+    else if (fraction <= 5) fraction = 5;
+    else fraction = 10;
+    return fraction * 10 ** zeros;
+}
+
+export class ChartBar<T> extends qreact.Component<{
+    data: ChartData<T>;
+    xAxis: keyof T;
+    yAxis: keyof T;
+    // Defaults to 100px
+    //  - is only roughly followed. At render time, we determine the width of the entire screen, and then we assume that we're going to fill the entire width, and then we divide that by this and round up, and that's how many bars we try to show. That way if they resize the window, we can utilize CSS to dynamically scale so nothing gets misaligned.
+    barWidthPx?: number;
+}> {
+    state = {
+        availableWidth: typeof window !== "undefined" ? window.innerWidth : 1200,
+    };
+
+    render() {
+        const { data, xAxis, yAxis } = this.props;
+        const barWidthPx = this.props.barWidthPx ?? DEFAULT_BAR_WIDTH_PX;
+        const rows = data.rows;
+
+        const xCol = data.columns[xAxis];
+        const yCol = data.columns[yAxis];
+        const yFormatter: JSXFormatter = yCol?.formatter ?? "guess";
+        const xFormatter: JSXFormatter = xCol?.formatter ?? (xCol?.isDateType ? "date" : "guess");
+
+        const targetBarCount = Math.max(1, Math.ceil(this.state.availableWidth / barWidthPx));
+        // Aggregate rows into at most targetBarCount bars (sum y values inside each bucket).
+        let displayBars: { xValue: unknown; yValue: number; rowsCount: number }[] = [];
+        if (rows.length <= targetBarCount) {
+            for (let r of rows) {
+                displayBars.push({ xValue: r[xAxis], yValue: Number(r[yAxis]) || 0, rowsCount: 1 });
+            }
+        } else {
+            // Bucket adjacent rows together. Each bucket gets ceil(rows.length / targetBarCount) rows.
+            let perBucket = Math.ceil(rows.length / targetBarCount);
+            for (let i = 0; i < rows.length; i += perBucket) {
+                let slice = rows.slice(i, i + perBucket);
+                let sum = 0;
+                for (let r of slice) sum += Number(r[yAxis]) || 0;
+                // Use the middle row's x value as the bucket label.
+                let mid = slice[Math.floor(slice.length / 2)];
+                displayBars.push({ xValue: mid[xAxis], yValue: sum, rowsCount: slice.length });
+            }
+        }
+
+        let maxY = 0;
+        for (let b of displayBars) {
+            if (b.yValue > maxY) maxY = b.yValue;
+        }
+        if (maxY <= 0) maxY = 1;
+        maxY = getNiceNumber(maxY);
+
+        // Build y labels from 0 to maxY, descending so top-of-chart is maxY.
+        let yLabelValues: number[] = [];
+        for (let i = 0; i < Y_LABEL_TARGET_COUNT; i++) {
+            let frac = 1 - i / (Y_LABEL_TARGET_COUNT - 1);
+            yLabelValues.push(frac * maxY);
+        }
+
+        const formatY = (v: number) => formatValue(v, yFormatter, { columnName: yAxis as string });
+        const formatX = (v: unknown) => formatValue(v, xFormatter, { columnName: xAxis as string });
+
+        const yLabelMaxWidth = `min(${Y_LABEL_MAX_WIDTH_PX}px, 15vw)` as const;
+        const xLabelMaxWidth = `min(${X_LABEL_MAX_WIDTH_PX}px, 12vw)` as const;
+
+        // Outer grid: [yLabels | chartArea] / [        | xLabels]
+        // yLabels column: shrinks to content but capped via max-width on labels.
+        // chartArea: contains horizontal grid lines (absolute) and a nested grid of bars.
+
+        // Y-axis labels: each label sits ON its grid line. We render them as a flex column
+        // with space-between and translate each by -50% so the text is centered on the line.
+        let yAxisLabelsNode = (
+            <div class={
+                css.relative.fillHeight.vbox0.justifyContent("space-between").alignEnd
+                    .paddingRight(8)
+                    .fontSize(Y_LABEL_FONT_SIZE_PX)
+            }>
+                {yLabelValues.map((v, i) => (
+                    <div class={
+                        css.relative
+                            .maxWidth(yLabelMaxWidth as any)
+                            .overflowHidden
+                            .whiteSpace("nowrap")
+                            .textOverflow("ellipsis")
+                            .textAlign("right")
+                            .top(i === 0 ? 0 : i === yLabelValues.length - 1 ? 0 : "-0.5em" as any)
+                    } title={String(v)}>
+                        {formatY(v)}
+                    </div>
+                ))}
+            </div>
+        );
+
+        // Horizontal grid lines, one per label position. Use a vertical flex with
+        // space-between, just like the labels, so they line up exactly.
+        let gridLinesNode = (
+            <div class={
+                css.absolute.pos(0, 0).fillBoth.pointerEvents("none")
+                    .vbox0.justifyContent("space-between")
+            }>
+                {yLabelValues.map(() => (
+                    <div class={css.fillWidth.height(1).background(GRID_LINE_COLOR)} />
+                ))}
+            </div>
+        );
+
+        let barsNode = (
+            <div class={
+                css.relative.fillBoth.display("grid")
+                    .gridTemplateColumns(`repeat(${displayBars.length}, 1fr)`)
+                    .alignItems("end")
+                    .columnGap(BAR_GAP_PX)
+            }>
+                {displayBars.map(bar => {
+                    let frac = bar.yValue / maxY;
+                    if (!isFinite(frac) || frac < 0) frac = 0;
+                    if (frac > 1) frac = 1;
+                    // Make tiny non-zero bars at least minimally visible.
+                    if (bar.yValue > 0 && frac < MIN_VISIBLE_BAR_FRAC) frac = MIN_VISIBLE_BAR_FRAC;
+                    let xStr = (() => {
+                        let f = formatX(bar.xValue);
+                        if (typeof f === "string") return f;
+                        if (typeof f === "number") return String(f);
+                        return String(bar.xValue);
+                    })();
+                    let yStr = (() => {
+                        let f = formatY(bar.yValue);
+                        if (typeof f === "string") return f;
+                        if (typeof f === "number") return String(f);
+                        return String(bar.yValue);
+                    })();
+                    return (
+                        <div
+                            class={
+                                css.fillWidth
+                                    .height(`${frac * 100}%` as any)
+                                    .background(BAR_COLOR)
+                                    .filter("brightness(1.15)", "hover")
+                            }
+                            title={`${xCol?.title ?? String(xAxis)}: ${xStr}\n${yCol?.title ?? String(yAxis)}: ${yStr}`}
+                        />
+                    );
+                })}
+            </div>
+        );
+
+        // X-axis labels: same column grid as bars so each label sits under its bar.
+        let xAxisLabelsNode = (
+            <div class={
+                css.display("grid")
+                    .gridTemplateColumns(`repeat(${displayBars.length}, 1fr)`)
+                    .columnGap(BAR_GAP_PX)
+                    .paddingTop(4)
+                    .fontSize(X_LABEL_FONT_SIZE_PX)
+            }>
+                {displayBars.map(bar => {
+                    let xStr = (() => {
+                        let f = formatX(bar.xValue);
+                        if (typeof f === "string") return f;
+                        if (typeof f === "number") return String(f);
+                        return String(bar.xValue);
+                    })();
+                    return (
+                        <div class={
+                            css.textAlign("center")
+                                .maxWidth(xLabelMaxWidth as any)
+                                .overflowHidden
+                                .whiteSpace("nowrap")
+                                .textOverflow("ellipsis")
+                        } title={xStr}>
+                            {formatX(bar.xValue)}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+
+        return (
+            <MeasuredDiv
+                onNewSize={(width) => {
+                    if (width !== this.state.availableWidth) {
+                        this.state.availableWidth = width;
+                    }
+                }}
+                class={
+                    css.fillBoth.display("grid")
+                        .gridTemplateColumns(`auto 1fr`)
+                        .gridTemplateRows(`1fr auto`)
+                        .minHeight(200)
+                }
+            >
+                {yAxisLabelsNode}
+                <div class={css.relative.fillBoth.overflowHidden}>
+                    {gridLinesNode}
+                    {barsNode}
+                </div>
+                <div />
+                {xAxisLabelsNode}
+            </MeasuredDiv>
+        );
+    }
+}