feat: ai features

package.json

@@ -14,15 +14,13 @@
     "@base-ui/react": "^1.2.0",
     "@clerk/nextjs": "^6.36.5",
     "@clerk/themes": "^2.4.55",
-    "@codemirror/commands": "^6.10.2",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/lang-python": "^6.2.1",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.39.15",
     "@hookform/resolvers": "^5.2.2",
     "@inngest/middleware-sentry": "^0.1.3",
     "@mendable/firecrawl-js": "^1.21.1",
@@ -41,6 +39,7 @@
     "embla-carousel-react": "^8.6.0",
     "inngest": "^3.48.1",
     "input-otp": "^1.4.2",
+    "ky": "^1.14.3",
     "lucide-react": "^0.575.0",
     "next": "16.1.1",
     "next-themes": "^0.4.6",

src/app/api/quick-edit/route.ts

@@ -0,0 +1,113 @@
+import { z } from "zod";
+import { generateText, Output } from "ai";
+import { NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { anthropic } from "@ai-sdk/anthropic";
+import { firecrawl } from "@/lib/firecrawl";
+
+const quickEditSchema = z.object({
+  editedCode: z
+    .string()
+    .describe(
+      "The edited version of the selected code based on the instruction"
+    ),
+});
+
+const URL_REGEX = /https?:\/\/[^\s)>\]]+/g;
+
+const QUICK_EDIT_PROMPT = `You are a code editing assistant. Edit the selected code based on the user's instruction.
+
+<context>
+<selected_code>
+{selectedCode}
+</selected_code>
+<full_code_context>
+{fullCode}
+</full_code_context>
+</context>
+
+{documentation}
+
+<instruction>
+{instruction}
+</instruction>
+
+<instructions>
+Return ONLY the edited version of the selected code.
+Maintain the same indentation level as the original.
+Do not include any explanations or comments unless requested.
+If the instruction is unclear or cannot be applied, return the original code unchanged.
+</instructions>`;
+
+export async function POST(request: Request) {
+  try {
+    const { userId } = await auth();
+    const { selectedCode, fullCode, instruction } = await request.json();
+
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 400 });
+    }
+
+    if (!selectedCode) {
+      return NextResponse.json(
+        { error: "Selected code is required" },
+        { status: 400 }
+      );
+    }
+
+    if (!instruction) {
+      return NextResponse.json(
+        { error: "Instruction is required" },
+        { status: 400 }
+      );
+    }
+
+    const urls: string[] = instruction.match(URL_REGEX) || [];
+    let documentationContext = "";
+
+    if (urls.length > 0) {
+      const scrapedResults = await Promise.all(
+        urls.map(async (url) => {
+          try {
+            const result = await firecrawl.scrapeUrl(url, {
+              formats: ["markdown"],
+            });
+
+            if (result.success && result.markdown) {
+              return `<doc url="${url}">\n${result.markdown}\n</doc>`;
+            }
+
+            return null;
+          } catch {
+            return null;
+          }
+        })
+      );
+
+      const validResults = scrapedResults.filter(Boolean);
+
+      if (validResults.length > 0) {
+        documentationContext = `<documentation>\n${validResults.join("\n\n")}\n</documentation>`;
+      }
+    }
+
+    const prompt = QUICK_EDIT_PROMPT.replace("{selectedCode}", selectedCode)
+      .replace("{fullCode}", fullCode || "")
+      .replace("{instruction}", instruction)
+      .replace("{documentation}", documentationContext);
+
+    const { output } = await generateText({
+      model: anthropic("claude-haiku-4-5-20251001"),
+      output: Output.object({ schema: quickEditSchema }),
+      prompt,
+    });
+
+    return NextResponse.json({ editedCode: output.editedCode });
+  } catch (error) {
+    console.error("Edit error:", error);
+    return NextResponse.json(
+      { error: "Failed to generate edit" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/suggestion/route.ts

@@ -0,0 +1,92 @@
+import { generateText, Output } from "ai";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { anthropic } from "@ai-sdk/anthropic";
+import { auth } from "@clerk/nextjs/server";
+// import { google } from "@ai-sdk/google";
+
+const suggestionSchema = z.object({
+  suggestion: z
+    .string()
+    .describe(
+      "The code to insert at cursor, or empty string if no complete needed"
+    ),
+});
+
+const SUGGESTION_PROMPT = `You are a code suggestion assistant.
+
+<context>
+<file_name>{fileName}</file_name>
+<previous_lines>
+{previousLines}
+</previous_lines>
+<current_line number="{lineNumber}">{currentLine}</current_line>
+<before_cursor>{textBeforeCursor}</before_cursor>
+<after_cursor>{textAfterCursor}</after_cursor>
+<next_lines>
+{nextLines}
+</next_lines>
+<full_code>
+{code}
+</full_code>
+</context>
+
+<instructions>
+Follow these steps IN ORDER:
+
+1. First, look at next_lines. If next_lines contains ANY code, check if it continues from where the cursor is. If it does, return empty string immediately - the code is already written.
+
+2. Check if before_cursor ends with a complete statement (;, }, )). If yes, return empty string.
+
+3. Only if steps 1 and 2 don't apply: suggest what should be typed at the cursor position, using context from full_code.
+
+Your suggestion is inserted immediately after the cursor, so never suggest code that's already in the file.
+</instructions>`;
+
+export async function POST(request: Request) {
+  try {
+    const { userId } = await auth();
+
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
+    }
+
+    const {
+      fileName,
+      code,
+      currentLine,
+      previousLines,
+      textBeforeCursor,
+      textAfterCursor,
+      nextLines,
+      lineNumber,
+    } = await request.json();
+
+    if (!code) {
+      return NextResponse.json({ error: "Code is required" }, { status: 400 });
+    }
+
+    const prompt = SUGGESTION_PROMPT.replace("{fileName}", fileName)
+      .replace("{code}", code)
+      .replace("{currentLine}", currentLine)
+      .replace("{previousLines}", previousLines || "")
+      .replace("{textBeforeCursor}", textBeforeCursor)
+      .replace("{textAfterCursor}", textAfterCursor)
+      .replace("{nextLines}", nextLines || "")
+      .replace("{lineNumber}", lineNumber.toString());
+
+    const { output } = await generateText({
+      model: anthropic("claude-haiku-4-5-20251001"),
+      output: Output.object({ schema: suggestionSchema }),
+      prompt,
+    });
+
+    return NextResponse.json({ suggestion: output.suggestion });
+  } catch (error) {
+    console.error("Suggestion error: ", error);
+    return NextResponse.json(
+      { error: "Failed to generate suggestion" },
+      { status: 500 }
+    );
+  }
+}

src/app/globals.css

@@ -119,7 +119,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground select-none;
+    @apply bg-background text-foreground;
   }
 }
 

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { IBM_Plex_Mono, Inter } from "next/font/google";
 
+import { Toaster } from "sonner";
 import { Providers } from "@/components/providers";
 
 import "./globals.css";
@@ -29,7 +30,10 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} ${plexMono.variable} antialiased`}>
-        <Providers>{children}</Providers>
+        <Providers>
+          {children}
+          <Toaster />
+        </Providers>
       </body>
     </html>
   );

src/features/editor/components/code-editor.tsx

@@ -8,6 +8,9 @@ import { keymap } from "@codemirror/view";
 import { minimap } from "../extensions/minimap";
 import { indentationMarkers } from "@replit/codemirror-indentation-markers";
 import { customSetup } from "../extensions/custom-setup";
+import { suggestion } from "../extensions/suggestion";
+import { quickEdit } from "../extensions/quick-edit";
+import { selectionTooltip } from "../extensions/selection-tooltip";
 
 interface Props {
   fileName: string;
@@ -36,11 +39,14 @@ export const CodeEditor = ({
       extensions: [
         oneDark,
         customTheme,
-        languageExtension,
         customSetup,
+        languageExtension,
+        suggestion(fileName),
+        quickEdit(fileName),
+        selectionTooltip(),
+        keymap.of([indentWithTab]),
         minimap(),
         indentationMarkers(),
-        keymap.of([indentWithTab]),
         EditorView.updateListener.of((update) => {
           if (update.docChanged) {
             onChange?.(update.state.doc.toString());

src/features/editor/components/editor-view.tsx

@@ -6,7 +6,7 @@ import { useFile } from "@/features/projects/hooks/use-files";
 import Image from "next/image";
 import { CodeEditor } from "./code-editor";
 import { useUpdateFile } from "@/features/projects/hooks/use-files";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
 const DEBOUNCE_MS = 1500;
 
@@ -19,6 +19,15 @@ export const EditorView = ({ projectId }: { projectId: Id<"projects"> }) => {
   const isActiveFileBinary = activeFile && activeFile.storageId;
   const isActiveFileText = activeFile && !activeFile.storageId;
 
+  // Clean-up pending debounced updates on unmount or file change
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [activeTabId]);
+
   return (
     <div className="h-full flex flex-col">
       <div className="flex items-center">

src/features/editor/extensions/quick-edit/fetcher.ts

@@ -0,0 +1,44 @@
+import ky from "ky";
+import { z } from "zod";
+import { toast } from "sonner";
+
+const editRequestSchema = z.object({
+  selectedCode: z.string(),
+  fullCode: z.string(),
+  instruction: z.string(),
+});
+
+const editResponseSchema = z.object({
+  editedCode: z.string(),
+});
+
+type EditRequest = z.infer<typeof editRequestSchema>;
+type EditResponse = z.infer<typeof editResponseSchema>;
+
+export const fetcher = async (
+  payload: EditRequest,
+  signal: AbortSignal
+): Promise<string | null> => {
+  try {
+    const validatedPayload = editRequestSchema.parse(payload);
+
+    const response = await ky
+      .post("/api/quick-edit", {
+        json: validatedPayload,
+        signal,
+        timeout: 30_000,
+        retry: 0,
+      })
+      .json<EditResponse>();
+
+    const validatedResponse = editResponseSchema.parse(response);
+
+    return validatedResponse.editedCode || null;
+  } catch (error) {
+    if (error instanceof Error && error.name === "AbortError") {
+      return null;
+    }
+    toast.error("Failed to fetch AI quick edit");
+    return null;
+  }
+};