frontend/get-help: include the latex error and the line in the prompt

Author: haraldschilly

src/.claude/settings.json

@@ -4,7 +4,7 @@
       "Bash(../node_modules/.bin/tsc:*)",
       "Bash(NODE_OPTIONS=--max-old-space-size=8192 ../node_modules/.bin/tsc --noEmit)",
       "Bash(bash:*)",
-      "Bash(curl:*)",
+      "Bash(chmod:*)",
       "Bash(curl:*)",
       "Bash(docker run:*)",
       "Bash(find:*)",
@@ -24,9 +24,11 @@
       "Bash(pnpm list:*)",
       "Bash(pnpm ts-build:*)",
       "Bash(pnpm tsc:*)",
+      "Bash(pnpm update:*)",
       "Bash(pnpm why:*)",
       "Bash(prettier -w:*)",
       "Bash(psql:*)",
+      "Bash(python3:*)",
       "WebFetch(domain:cocalc.com)",
       "WebFetch(domain:doc.cocalc.com)",
       "WebFetch(domain:docs.anthropic.com)",
@@ -36,6 +38,7 @@
       "WebFetch(domain:www.anthropic.com)",
       "WebSearch",
       "mcp__cclsp__find_definition",
+      "mcp__cclsp__find_references",
       "mcp__github__get_issue",
       "mcp__github__get_pull_request_comments",
       "mcp__github__get_pull_request",

src/packages/frontend/frame-editors/frame-tree/format-error.tsx

@@ -1,4 +1,4 @@
-// A dismissable error message that appears when formatting code.
+// A dismissible error message that appears when formatting code.
 
 import { Alert, Button } from "antd";
 import { useMemo } from "react";

src/packages/frontend/frame-editors/latex-editor/errors-and-warnings.tsx

@@ -143,9 +143,8 @@ const Item: React.FC<ItemProps> = React.memo(
           style={{ float: "right", marginLeft: "10px" }}
           size="small"
           task={"ran latex"}
-          error={
-            (item.get("message") ?? "") + "\n" + (item.get("content") ?? "")
-          }
+          error={item.get("message") ?? ""}
+          line={item.get("content") ?? ""}
           input={() => {
             const s = actions._syncstring.to_str();
             const v = s

src/packages/frontend/frame-editors/latex-editor/gutters.tsx

@@ -87,7 +87,8 @@ function Component({
                   size="small"
                   style={{ marginTop: "5px" }}
                   task={"ran latex"}
-                  error={content}
+                  error={message}
+                  line={content}
                   input={() => {
                     const s = actions._syncstring.to_str();
                     const v = s
@@ -100,7 +101,7 @@ function Component({
                   language={"latex"}
                   extraFileInfo={actions.languageModelExtraFileInfo()}
                   tag={"latex-error-popover"}
-                  prioritize="end"
+                  prioritize="start-end"
                 />
               </>
             )}

src/packages/frontend/frame-editors/llm/help-me-fix-utils.ts

@@ -12,6 +12,7 @@ export interface GetHelpOptions {
   error: string;
   input?: string;
   task?: string;
+  line?: string;
   language?: string;
   extraFileInfo?: string;
   redux: any;
@@ -22,6 +23,7 @@ export interface GetHelpOptions {
 export interface CreateMessageOpts {
   tag?: string;
   error: string;
+  line: string;
   input?: string;
   task?: string;
   language?: string;
@@ -38,6 +40,7 @@ export async function getHelp(options: GetHelpOptions) {
     project_id,
     path,
     tag,
+    line = "",
     error,
     input,
     task,
@@ -51,6 +54,7 @@ export async function getHelp(options: GetHelpOptions) {
   const solutionText = createMessage({
     error,
     task,
+    line,
     input,
     language,
     extraFileInfo,
@@ -77,6 +81,7 @@ export async function getHelp(options: GetHelpOptions) {
 
 export function createMessage({
   error,
+  line,
   language,
   input,
   model,
@@ -104,20 +109,19 @@ export function createMessage({
     message.push(`I ${task}.`);
   }
 
-  if (error.length > 3000) {
-    // 3000 is about 500 tokens
-    // This uses structure:
-    error = shortenError(error, language);
-    if (error.length > 3000) {
-      // this just puts ... in the middle.
-      error = trunc_middle(error, 3000);
-    }
-  }
+  error = trimStr(error, language);
+  line = trimStr(line, language);
 
   message.push(`I received the following error:`);
   const delimE = backtickSequence(error);
   message.push(`${delimE}${language}\n${error}\n${delimE}`);
 
+  if (line) {
+    message.push(`For the following line:`);
+    const delimL = backtickSequence(line);
+    message.push(`${delimL}${language}\n${line}\n${delimL}`);
+  }
+
   // We put the input last, since it could be huge and get truncated.
   // It's much more important to show the error, obviously.
   if (input) {
@@ -151,3 +155,16 @@ export function createMessage({
 
   return message.join("\n\n");
 }
+
+function trimStr(s: string, language): string {
+  if (s.length > 3000) {
+    // 3000 is about 500 tokens
+    // This uses structure:
+    s = shortenError(s, language);
+    if (s.length > 3000) {
+      // this just puts ... in the middle.
+      s = trunc_middle(s, 3000);
+    }
+  }
+  return s;
+}

src/packages/frontend/frame-editors/llm/help-me-fix.tsx

@@ -21,6 +21,7 @@ export { getHelp } from "./help-me-fix-utils";
 
 interface Props {
   error: string | (() => string); // the error it produced. This is viewed as code.
+  line?: string | (() => string); // the line content where the error was produced, if available
   input?: string | (() => string); // the input, e.g., code you ran
   task?: string; // what you're doing, e.g., "ran a cell in a Jupyter notebook" or "ran a code formatter"
   tag?: string;
@@ -34,12 +35,13 @@ interface Props {
 
 function get(f: undefined | string | (() => string)): string {
   if (f == null) return "";
-  if (typeof f == "string") return f;
+  if (typeof f === "string") return f;
   return f();
 }
 
 export default function HelpMeFix({
   error,
+  line,
   task,
   input,
   tag,
@@ -78,6 +80,7 @@ export default function HelpMeFix({
   ): string {
     return createMessage({
       error: get(error),
+      line: get(line),
       task,
       input: get(input),
       language,

src/packages/frontend/frame-editors/rmd-editor/build-log.tsx

@@ -5,11 +5,12 @@
 
 import Anser from "anser";
 import React from "react";
-import Ansi from "@cocalc/frontend/components/ansi-to-react";
+
 import { Button } from "@cocalc/frontend/antd-bootstrap";
 import { Rendered, useRedux } from "@cocalc/frontend/app-framework";
 import { Loading } from "@cocalc/frontend/components";
-import HelpMeFix from "../llm/help-me-fix";
+import Ansi from "@cocalc/frontend/components/ansi-to-react";
+import HelpMeFix from "@cocalc/frontend/frame-editors/llm/help-me-fix";
 import { Actions } from "./actions";
 import {
   STYLE_ERR,