querysub 0.498.0 → 0.500.0

package/bin/autofixer.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+
+process.argv.push("--local");
+
+require("typenode");
+require("../src/diagnostics/logs/errorTickets/autoFixerEntry.ts");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.498.0",
+  "version": "0.500.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",
@@ -24,6 +24,7 @@
     "mc": "yarn typenode ./src/diagnostics/logs/IndexedLogs/MCPIndexedLogsEntry.ts --cwd D:/repos/qs-cyoa/",
     "mcp2": "yarn typenode ./src/diagnostics/debugger/mcp-server.ts",
     "mc2": "yarn typenode ./src/diagnostics/debugger/mcp-server.ts --cwd D:/repos/qs-cyoa/",
+    "autofixer": "yarn typenode ./src/diagnostics/logs/errorTickets/autoFixerEntry.ts",
     "ssh-a-claude": "ssh root@a.querysubtest.com"
   },
   "bin": {
@@ -47,7 +48,8 @@
     "error-watch-public": "./bin/error-watch-public.js",
     "audit-imports": "./bin/audit-imports.js",
     "audit-disk-values": "./bin/audit-disk-values.js",
-    "mcp-indexed-logs": "./bin/mcp-indexed-logs.js"
+    "mcp-indexed-logs": "./bin/mcp-indexed-logs.js",
+    "autofixer": "./bin/autofixer.js"
   },
   "dependencies": {
     "@types/fs-ext": "^2.0.3",

package/src/diagnostics/logs/errorNotifications2/ErrorNotificationPage.tsx

@@ -18,6 +18,18 @@ import { startTimeParam, endTimeParam } from "../TimeRangeSelector";
 import { timeInHour } from "socket-function/src/misc";
 import { ATag, URLOverride } from "../../../library-components/ATag";
 import { Button } from "../../../library-components/Button";
+import { createTicketForError, ticketIdURL } from "../errorTickets/TicketPage";
+
+function openTicket(datum: LogDatum, pattern: string | undefined) {
+    Querysub.onCommitFinished(async () => {
+        let id = await createTicketForError(datum, pattern);
+        Querysub.commit(() => {
+            showingManagementURL.value = true;
+            managementPageURL.value = "TicketPage";
+            ticketIdURL.value = id;
+        });
+    });
+}
 
 let getMatcher = cacheLimited(100, (pattern: string) =>
     createMatchesPattern(Buffer.from(pattern), false)
@@ -154,6 +166,18 @@ export class LogDatumRenderer extends qreact.Component<{
                     >
                         Not a Bug
                     </Button>
+                    <Button
+                        hue={210}
+                        onClick={(e) => {
+                            if (this.props.inlineMode) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }
+                            openTicket(datum, timedOutMatches[0].pattern);
+                        }}
+                    >
+                        Ticket
+                    </Button>
                 </div>
             )}
 
@@ -412,6 +436,19 @@ class SuppressionItem extends qreact.Component<{
                 >
                     Not a Bug
                 </Button>
+                <Button
+                    hue={210}
+                    onClick={() => {
+                        let datum = this.props.matchData?.examples[0] || {
+                            time: Date.now(),
+                            __LOG_TYPE: "error",
+                            param0: suppression.pattern,
+                        };
+                        openTicket(datum, suppression.pattern);
+                    }}
+                >
+                    Ticket
+                </Button>
                 <Button
                     hue={30}
                     onClick={() => {

package/src/diagnostics/logs/errorNotifications2/errorNotifications.ts

@@ -22,6 +22,7 @@ import { createLink } from "../../../library-components/ATag";
 import { showingManagementURL, managementPageURL } from "../../managementPages";
 import { atomic } from "../../../2-proxy/PathValueProxyWatcher";
 import { magenta } from "socket-function/src/formatting/logColors";
+import { exposeTicketService } from "../errorTickets/tickets";
 
 
 export type SuppressionEntry = {
@@ -306,6 +307,7 @@ const trySendDiscordNotificationsBase = batchFunction({ delay: 1000 * 3 }, async
 
 export async function exposeErrorWatchService() {
     SocketFunction.expose(ErrorNotificationServiceBase);
+    exposeTicketService();
 
     let errorLogs = await getErrorLogs();
     for await (let error of watchAllValues(errorLogs)) {

package/src/diagnostics/logs/errorTickets/TicketPage.tsx

@@ -0,0 +1,518 @@
+import { qreact } from "../../../4-dom/qreact";
+import { t } from "../../../2-proxy/schema2";
+import { css } from "typesafecss";
+import { SocketFunction } from "socket-function/SocketFunction";
+import { lazy } from "socket-function/src/caching";
+import { nextId, sort } from "socket-function/src/misc";
+import { formatDateTime, formatTime } from "socket-function/src/formatting/format";
+import { Querysub } from "../../../4-querysub/Querysub";
+import { URLParam } from "../../../library-components/URLParam";
+import { ATag } from "../../../library-components/ATag";
+import { Button } from "../../../library-components/Button";
+import { LogDatum } from "../diskLogger";
+import { TicketsController } from "./tickets";
+import { Ticket, TicketComment, TicketPatchFile, TicketState, TICKET_STATES } from "./ticketTypes";
+
+export const ticketIdURL = new URLParam("ticketid", "");
+
+const TITLE_MAX_LENGTH = 200;
+
+const STATE_HUES: Record<TicketState, number> = {
+    "investigation": 45,
+    "code-change": 210,
+    "fixed": 120,
+    "not-a-bug": 280,
+    "timed-out": 0,
+};
+
+function getController() {
+    return TicketsController(SocketFunction.browserNodeId());
+}
+
+function resetTicketData() {
+    let controller = getController();
+    controller.getTickets.resetAll();
+    controller.getTicket.resetAll();
+}
+
+export async function createTicketForError(datum: LogDatum, suppressionPattern?: string): Promise<string> {
+    let now = Date.now();
+    let title = (datum.param0 && String(datum.param0) || "(no message)").slice(0, TITLE_MAX_LENGTH);
+    let ticket: Ticket = {
+        id: nextId(),
+        title,
+        state: "investigation",
+        createdTime: now,
+        lastUpdatedTime: now,
+        errorDatum: datum,
+        suppressionPattern,
+        comments: [],
+    };
+    await getController().createTicket.promise(ticket);
+    resetTicketData();
+    return ticket.id;
+}
+
+const HLJS_VERSION = "11.9.0";
+let ensureHljsLoaded = lazy(async (): Promise<void> => {
+    if ((window as any).hljs) return;
+    let link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${HLJS_VERSION}/styles/github-dark.min.css`;
+    document.head.appendChild(link);
+    await new Promise<void>((resolve, reject) => {
+        let script = document.createElement("script");
+        script.src = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${HLJS_VERSION}/highlight.min.js`;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error("Failed to load highlight.js"));
+        document.head.appendChild(script);
+    });
+});
+
+class HighlightedCode extends qreact.Component<{
+    code: string;
+    file?: string;
+}> {
+    state = t.state({
+        html: t.atomic<string>(""),
+    });
+
+    componentDidMount() {
+        void (async () => {
+            try {
+                await ensureHljsLoaded();
+                let hljs = (window as any).hljs;
+                let extension = this.props.file?.split(".").pop() || "";
+                let html: string;
+                if (extension && hljs.getLanguage(extension)) {
+                    html = hljs.highlight(this.props.code, { language: extension }).value;
+                } else {
+                    html = hljs.highlightAuto(this.props.code).value;
+                }
+                Querysub.commit(() => {
+                    this.state.html = html;
+                });
+            } catch (e) {
+                console.error(`Failed to highlight code:`, (e as Error).stack ?? e);
+            }
+        })();
+    }
+
+    render() {
+        let html = this.state.html;
+        return <pre className={
+            css.pad2(8).hsl(220, 15, 15).colorhsl(0, 0, 90).overflowAuto.maxHeight(400)
+                .fontSize(12).whiteSpace("pre-wrap").margin(0).fillWidth
+            + " hljs"
+        }>
+            <code
+                key={html && "highlighted" || "plain"}
+                ref2={(element: HTMLElement | undefined) => {
+                    if (!element) return;
+                    if (html) {
+                        element.innerHTML = html;
+                    }
+                }}
+            >{!html && this.props.code || undefined}</code>
+        </pre>;
+    }
+}
+
+function StateBadge(props: { state: TicketState }) {
+    let hue = STATE_HUES[props.state] ?? 0;
+    return <span className={
+        css.pad2(6, 2).hsl(hue, 60, 85).colorhsl(hue, 80, 25).bord2(hue, 60, 60)
+            .fontSize(12).boldStyle.whiteSpace("nowrap")
+    }>
+        {props.state}
+    </span>;
+}
+qreact.inline(StateBadge);
+
+export class TicketPage extends qreact.Component {
+    render() {
+        if (ticketIdURL.value) {
+            return <TicketDetail ticketId={ticketIdURL.value} />;
+        }
+        return <TicketList />;
+    }
+}
+
+class TicketList extends qreact.Component {
+    render() {
+        let tickets = getController().getTickets();
+        if (!tickets) {
+            return <div className={css.vbox(16).pad2(16)}>
+                <h2>Tickets</h2>
+                <div>Loading tickets...</div>
+            </div>;
+        }
+
+        let sorted = [...tickets];
+        sort(sorted, x => -x.lastUpdatedTime);
+
+        return <div className={css.vbox(16).pad2(16).fillWidth}>
+            <div className={css.hbox(16)}>
+                <h2>Tickets ({sorted.length})</h2>
+                <Button
+                    hue={200}
+                    onClick={() => {
+                        resetTicketData();
+                    }}
+                >
+                    Refresh
+                </Button>
+            </div>
+            {sorted.length === 0 && <div>No tickets. Create one from the Error Notifications page with the "Ticket" button.</div>}
+            <div className={css.vbox(8)}>
+                {sorted.map(ticket => (
+                    <ATag
+                        key={ticket.id}
+                        values={[ticketIdURL.getOverride(ticket.id)]}
+                        className={css.hbox(16).pad2(12).bord2(200, 30, 70).hsl(0, 0, 96).alignItems("center").textDecoration("none")}
+                    >
+                        <StateBadge state={ticket.state} />
+                        <span className={css.ellipsis.flexFillWidth.colorhsl(0, 0, 10).boldStyle}>{ticket.title}</span>
+                        <span className={css.colorhsl(0, 0, 40).whiteSpace("nowrap").fontSize(12)}>
+                            {ticket.comments.length} comments
+                        </span>
+                        <span className={css.colorhsl(0, 0, 40).whiteSpace("nowrap").fontSize(12)}>
+                            Created {formatDateTime(ticket.createdTime)}
+                        </span>
+                        <span className={css.colorhsl(0, 0, 40).whiteSpace("nowrap").fontSize(12)}>
+                            Updated {formatTime(Date.now() - ticket.lastUpdatedTime)} ago
+                        </span>
+                    </ATag>
+                ))}
+            </div>
+        </div>;
+    }
+}
+
+class TicketDetail extends qreact.Component<{ ticketId: string }> {
+    state = t.state({
+        newCommentText: t.atomic<string>(""),
+        showingErrorInfo: t.atomic<boolean>(false),
+    });
+
+    render() {
+        let ticket = getController().getTicket(this.props.ticketId);
+        if (!ticket) {
+            return <div className={css.vbox(16).pad2(16)}>
+                <ATag values={[ticketIdURL.getOverride("")]}>← All Tickets</ATag>
+                <div>Loading ticket...</div>
+            </div>;
+        }
+
+        let sortedComments = [...ticket.comments];
+        sort(sortedComments, x => x.time);
+
+        return <div className={css.vbox(16).pad2(16).fillWidth.maxWidth("100%")}>
+            <div className={css.hbox(16).alignItems("center")}>
+                <ATag values={[ticketIdURL.getOverride("")]}>← All Tickets</ATag>
+                <StateBadge state={ticket.state} />
+                <h2 className={css.margin(0).ellipsis}>{ticket.title}</h2>
+            </div>
+
+            <div className={css.hbox(8).alignItems("center").wrap}>
+                <span>Set state:</span>
+                {TICKET_STATES.map(state => (
+                    <Button
+                        key={state}
+                        hue={STATE_HUES[state]}
+                        disabled={state === ticket!.state}
+                        onClick={() => {
+                            Querysub.onCommitFinished(async () => {
+                                await getController().setTicketState.promise(this.props.ticketId, state);
+                                resetTicketData();
+                            });
+                        }}
+                    >
+                        {state}
+                    </Button>
+                ))}
+                <Button
+                    hue={0}
+                    onClick={() => {
+                        if (!confirm(`Delete this ticket "${ticket!.title}"?`)) return;
+                        Querysub.onCommitFinished(async () => {
+                            await getController().deleteTicket.promise(this.props.ticketId);
+                            resetTicketData();
+                            Querysub.commit(() => {
+                                ticketIdURL.value = "";
+                            });
+                        });
+                    }}
+                >
+                    Delete Ticket
+                </Button>
+            </div>
+
+            <div className={css.vbox(8).pad2(12).bord2(0, 50, 70).hsl(0, 30, 96)}>
+                <div
+                    className={css.hbox(8).button}
+                    onClick={() => {
+                        this.state.showingErrorInfo = !this.state.showingErrorInfo;
+                    }}
+                >
+                    <span>{this.state.showingErrorInfo && "▼" || "▶"}</span>
+                    <strong>Error Information</strong>
+                    <span className={css.colorhsl(0, 0, 40)}>{formatDateTime(ticket.errorDatum.time)}</span>
+                </div>
+                {ticket.suppressionPattern && (
+                    <div className={css.hbox(8)}>
+                        <strong>Suppression Pattern:</strong>
+                        <span>{ticket.suppressionPattern}</span>
+                    </div>
+                )}
+                {this.state.showingErrorInfo && (
+                    <div className={css.vbox(4).pad2(8).hsl(0, 0, 98).bord2(0, 0, 85)}>
+                        {Object.entries(ticket.errorDatum).map(([key, value]) => (
+                            <div key={key} className={css.hbox(8)}>
+                                <strong className={css.minWidth(120)}>{key}:</strong>
+                                <div className={css.flexGrow(1).margin(0).whiteSpace("pre-wrap").overflowWrap("break-word")}>{JSON.stringify(value, undefined, 2)}</div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            <div className={css.vbox(12)}>
+                <h3>Comments ({sortedComments.length})</h3>
+                {sortedComments.map(comment => (
+                    <TicketCommentItem key={comment.id} ticketId={this.props.ticketId} comment={comment} />
+                ))}
+            </div>
+
+            <div className={css.vbox(8).pad2(12).bord2(120, 50, 60).hsl(120, 50, 96)}>
+                <strong>Add Comment</strong>
+                <textarea
+                    className={css.minHeight(80).fillWidth.pad2(8)}
+                    value={this.state.newCommentText}
+                    onInput={e => {
+                        this.state.newCommentText = (e.target as HTMLTextAreaElement).value;
+                    }}
+                />
+                <div className={css.hbox(8)}>
+                    <Button
+                        hue={120}
+                        onClick={() => {
+                            let text = this.state.newCommentText.trim();
+                            if (!text) return;
+                            Querysub.onCommitFinished(async () => {
+                                let comment: TicketComment = {
+                                    id: nextId(),
+                                    time: Date.now(),
+                                    author: "user",
+                                    kind: "text",
+                                    text,
+                                };
+                                await getController().addComment.promise(this.props.ticketId, comment);
+                                resetTicketData();
+                                Querysub.commit(() => {
+                                    this.state.newCommentText = "";
+                                });
+                            });
+                        }}
+                    >
+                        Add Comment
+                    </Button>
+                </div>
+            </div>
+        </div>;
+    }
+}
+
+class TicketCommentItem extends qreact.Component<{
+    ticketId: string;
+    comment: TicketComment;
+}> {
+    state = t.state({
+        editing: t.atomic<boolean>(false),
+        editText: t.atomic<string>(""),
+        expandedTool: t.atomic<boolean>(false),
+    });
+
+    render() {
+        let comment = this.props.comment;
+
+        let hue = comment.author === "user" && 120 || 210;
+        if (comment.kind === "tool-call") {
+            hue = 0;
+        }
+
+        return <div className={css.vbox(8).pad2(12).bord2(hue, 30, 70).hsl(hue, 20, 97)}>
+            <div className={css.hbox(12).alignItems("center")}>
+                <strong>{comment.author}</strong>
+                <span className={css.colorhsl(0, 0, 40).fontSize(12)}>{formatDateTime(comment.time)}</span>
+                {comment.kind === "patch" && (
+                    <span className={css.pad2(6, 2).hsl(210, 60, 85).colorhsl(210, 80, 25).fontSize(12).boldStyle}>PATCH</span>
+                )}
+                {comment.kind === "tool-call" && (
+                    <span className={css.pad2(6, 2).hsl(0, 0, 85).colorhsl(0, 0, 25).fontSize(12).boldStyle}>TOOL</span>
+                )}
+                <div className={css.flexFillWidth} />
+                {comment.kind === "text" && !this.state.editing && (
+                    <Button
+                        hue={200}
+                        flavor="small"
+                        onClick={() => {
+                            this.state.editing = true;
+                            this.state.editText = comment.text;
+                        }}
+                    >
+                        Edit
+                    </Button>
+                )}
+                <Button
+                    hue={0}
+                    flavor="small"
+                    onClick={() => {
+                        if (!confirm(`Delete this comment?`)) return;
+                        Querysub.onCommitFinished(async () => {
+                            await getController().deleteComment.promise(this.props.ticketId, comment.id);
+                            resetTicketData();
+                        });
+                    }}
+                >
+                    Delete
+                </Button>
+            </div>
+
+            {comment.kind === "tool-call" && (
+                <div className={css.vbox(8)}>
+                    <div
+                        className={css.hbox(8).button}
+                        onClick={() => {
+                            this.state.expandedTool = !this.state.expandedTool;
+                        }}
+                    >
+                        <span>{this.state.expandedTool && "▼" || "▶"}</span>
+                        <strong>{comment.toolName}</strong>
+                        {comment.toolDurationMs !== undefined && (
+                            <span className={css.colorhsl(0, 0, 40).fontSize(12)}>{formatTime(comment.toolDurationMs)}</span>
+                        )}
+                        <span className={css.ellipsis.colorhsl(0, 0, 40).fontSize(12)}>{comment.toolInput}</span>
+                    </div>
+                    {this.state.expandedTool && (
+                        <div className={css.vbox(8)}>
+                            <strong>Input</strong>
+                            <pre className={css.pad2(8).hsl(0, 0, 92).whiteSpace("pre-wrap").overflowWrap("break-word").margin(0).fontSize(12).maxHeight(200).overflowAuto}>{comment.toolInput}</pre>
+                            <strong>Output</strong>
+                            <pre className={css.pad2(8).hsl(0, 0, 92).whiteSpace("pre-wrap").overflowWrap("break-word").margin(0).fontSize(12).maxHeight(400).overflowAuto}>{comment.toolOutput}</pre>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {comment.kind !== "tool-call" && !this.state.editing && (
+                <div className={css.whiteSpace("pre-wrap")}>{comment.text}</div>
+            )}
+
+            {this.state.editing && (
+                <div className={css.vbox(8)}>
+                    <textarea
+                        className={css.minHeight(80).fillWidth.pad2(8)}
+                        value={this.state.editText}
+                        onInput={e => {
+                            this.state.editText = (e.target as HTMLTextAreaElement).value;
+                        }}
+                    />
+                    <div className={css.hbox(8)}>
+                        <Button
+                            hue={120}
+                            onClick={() => {
+                                let text = this.state.editText.trim();
+                                Querysub.onCommitFinished(async () => {
+                                    await getController().updateCommentText.promise(this.props.ticketId, comment.id, text);
+                                    resetTicketData();
+                                    Querysub.commit(() => {
+                                        this.state.editing = false;
+                                    });
+                                });
+                            }}
+                        >
+                            Save
+                        </Button>
+                        <Button
+                            onClick={() => {
+                                this.state.editing = false;
+                            }}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </div>
+            )}
+
+            {comment.kind === "patch" && comment.patchFiles && (
+                <div className={css.vbox(12)}>
+                    {comment.patchFiles.map((patchFile, idx) => (
+                        <PatchFileView key={idx} patchFile={patchFile} />
+                    ))}
+                    <div className={css.hbox(12).alignItems("center")}>
+                        {comment.patchStatus === "pending" && (
+                            <>
+                                <Button
+                                    hue={120}
+                                    onClick={() => {
+                                        Querysub.onCommitFinished(async () => {
+                                            try {
+                                                await getController().applyPatch.promise(this.props.ticketId, comment.id);
+                                            } catch (e) {
+                                                alert(`Failed to apply patch: ${(e as Error).message}`);
+                                            }
+                                            resetTicketData();
+                                        });
+                                    }}
+                                >
+                                    Apply Patch
+                                </Button>
+                                <Button
+                                    hue={0}
+                                    onClick={() => {
+                                        Querysub.onCommitFinished(async () => {
+                                            await getController().setPatchStatus.promise(this.props.ticketId, comment.id, "rejected");
+                                            resetTicketData();
+                                        });
+                                    }}
+                                >
+                                    Reject Patch
+                                </Button>
+                            </>
+                        )}
+                        {comment.patchStatus === "applied" && (
+                            <span className={css.colorhsl(120, 80, 25).boldStyle}>
+                                Applied {comment.patchStatusTime && formatDateTime(comment.patchStatusTime) || ""}
+                            </span>
+                        )}
+                        {comment.patchStatus === "rejected" && (
+                            <span className={css.colorhsl(0, 80, 40).boldStyle}>
+                                Rejected {comment.patchStatusTime && formatDateTime(comment.patchStatusTime) || ""}
+                            </span>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>;
+    }
+}
+
+class PatchFileView extends qreact.Component<{ patchFile: TicketPatchFile }> {
+    render() {
+        let patchFile = this.props.patchFile;
+        return <div className={css.vbox(4)}>
+            <strong className={css.fontSize(13)}>{patchFile.file}</strong>
+            {patchFile.oldText && (
+                <div className={css.vbox(2)}>
+                    <span className={css.colorhsl(0, 70, 40).fontSize(12).boldStyle}>- Old</span>
+                    <HighlightedCode code={patchFile.oldText} file={patchFile.file} />
+                </div>
+            )}
+            <div className={css.vbox(2)}>
+                <span className={css.colorhsl(120, 70, 30).fontSize(12).boldStyle}>+ New{!patchFile.oldText && " (file created)" || ""}</span>
+                <HighlightedCode code={patchFile.newText} file={patchFile.file} />
+            </div>
+        </div>;
+    }
+}