Merge branch 'main' of https://github.com/codeflash-ai/codeflash into coverage_clean

.github/workflows/nextjs-build.yaml

@@ -0,0 +1,36 @@
+name: Next.js Build Check
+
+on:
+  pull_request:
+    paths:
+      - 'js/cf-webapp/**'
+
+jobs:
+  build:
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: read
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: https://npm.pkg.github.com
+          scope: '@codeflash-ai'
+
+      - name: Install dependencies
+        run: |
+          cd js/cf-webapp
+          npm install
+
+      - name: Build and package app
+        run: |
+          cd js/cf-webapp
+          npm run build

js/cf-webapp/.gitignore

@@ -39,3 +39,5 @@ next-env.d.ts
 # Sentry Config File
 .sentryclirc
 
+.npmrc
+

js/cf-webapp/.npmrc

@@ -1,2 +0,0 @@
-//npm.pkg.github.com/:_authToken=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
-@codeflash-ai:registry=https://npm.pkg.github.com

js/cf-webapp/package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@sentry/nextjs": "^8.9.2",
     "@types/node": "^20",
     "@types/pg": "^8.10.9",
@@ -32,7 +33,6 @@
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "vitest": "^1.6.0",
     "autoprefixer": "^10.0.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
@@ -62,6 +62,7 @@
     "tailwindcss": "^3.3.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.3.2",
+    "vitest": "^1.6.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

js/cf-webapp/src/app/app/apikeys/page.tsx

@@ -38,7 +38,8 @@ export default async function APIKeyGenerator(): Promise<JSX.Element> {
         API Keys
       </h3>
       <Separator />
-      {apiKeys.length === 0 ? ( <>
+      {apiKeys.length === 0 ? (
+        <>
           <p className="leading-7 mt-6">
             Welcome! Check out the{" "}
             <a
@@ -51,18 +52,22 @@ export default async function APIKeyGenerator(): Promise<JSX.Element> {
             docs, or create your first API key below to start using Codeflash.
           </p>
           <p>
-            For help with setting up Codeflash on your codebase, please check out the Docs or <a href="https://calendly.com/codeflash-saurabh/codeflash-setup" target="_blank" className="underline">book a call</a> with the founder.
+            For help with setting up Codeflash on your codebase, please check out the Docs or{" "}
+            <a
+              href="https://calendly.com/codeflash-saurabh/codeflash-setup"
+              target="_blank"
+              className="underline"
+            >
+              book a call
+            </a>{" "}
+            with the founder.
           </p>
-          </>
+        </>
       ) : (
         <>
           {" "}
           <p className="leading-7 mt-6">
-            These API keys are used to authenticate your requests to Codeflash&apos;s AI services and also to the GitHub App
-            if you have installed it.
-          </p>
-          <p>
-            For help with setting up Codeflash on your codebase, please check out the Docs or <a href="https://calendly.com/codeflash-saurabh/codeflash-setup" target="_blank" className="underline">book a call</a> with the founder.
+            These API keys are used to authenticate your requests to Codeflash&apos;s AI services.
           </p>
           <ApiKeyTable apiKeys={apiKeys} />{" "}
         </>

js/cf-webapp/src/app/app/gettingstarted/copy-button.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Copy } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import * as Tooltip from '@radix-ui/react-tooltip'
+
+export function CopyButton({ text }: { text: string }) {
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text)
+  }
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleCopy}>
+            <Copy className="h-4 w-4" />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            className="bg-popover px-3 py-1.5 text-sm text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md"
+            sideOffset={5}
+          >
+            Copy contents
+            <Tooltip.Arrow className="fill-popover" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  )
+}

js/cf-webapp/src/app/app/gettingstarted/page.tsx

@@ -0,0 +1,142 @@
+// page.tsx
+import { getSession } from "@auth0/nextjs-auth0"
+import { redirect } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { CopyButton } from "./copy-button"
+import PostHogClient from "@/app/app/posthog"
+import Link from "next/link"
+
+export default async function GettingStarted() {
+  const session = await getSession()
+  if (session == null) {
+    redirect("/login")
+  }
+
+  const userId = session.user.sub
+  const posthog = PostHogClient()
+  posthog.capture({
+    distinctId: userId,
+    properties: { username: session.nickname },
+    event: "webapp-loaded-getting-started",
+  })
+
+  await posthog.shutdown()
+
+  return (
+    <div className="min-h-screen">
+      <main className="max-w-3xl mx-auto px-4 py-8">
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <h1 className="text-4xl font-semibold">Quick Start Guide</h1>
+            <p className="text-muted-foreground">
+              Follow these steps to set up Codeflash in your project
+            </p>
+          </div>
+
+          <Separator />
+
+          <div className="space-y-8">
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <div className="bg-primary text-primary-foreground w-6 h-6 rounded-full flex items-center justify-center font-semibold">
+                  1
+                </div>
+                <span>Generate an API key from the API Keys page</span>
+              </div>
+              <Button
+                variant="outline"
+                className="bg-primary/20 text-primary hover:bg-primary/30 border-0"
+                asChild
+              >
+                <Link href="/app/apikeys">Generate API Key</Link>
+              </Button>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <div className="bg-primary text-primary-foreground w-6 h-6 rounded-full flex items-center justify-center font-semibold">
+                  2
+                </div>
+                <span>Install the Codeflash package in your project&apos;s Python environment</span>
+              </div>
+              <Card className="bg-muted border p-4 rounded-lg">
+                <div className="flex justify-between items-center font-mono">
+                  <pre className="text-sm">
+                    <span className="text-green-600">pip install codeflash</span>
+                  </pre>
+                  <CopyButton text="pip install codeflash" />
+                </div>
+              </Card>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <div className="bg-primary text-primary-foreground w-6 h-6 rounded-full flex items-center justify-center font-semibold">
+                  3
+                </div>
+                <span>Configure codeflash for your codebase - at your project&apos;s root, run:</span>
+              </div>
+              <Card className="bg-muted border p-4 rounded-lg">
+                <div className="flex justify-between items-center font-mono">
+                  <pre className="text-sm">
+                    <span className="text-green-600">codeflash init</span>
+                  </pre>
+                  <CopyButton
+                    text="codeflash init"
+                  />
+                </div>
+              </Card>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <div className="bg-primary text-primary-foreground w-6 h-6 rounded-full flex items-center justify-center font-semibold">
+                  4
+                </div>
+                <span>
+                  To optimize all future GitHub PRs, add Codeflash as a Github Action by running:{" "}
+                </span>
+              </div>
+              <Card className="bg-muted border p-4 rounded-lg">
+                <div className="flex justify-between items-center font-mono">
+                  <pre className="text-sm">
+                    <span className="text-green-600">codeflash init-actions</span>
+                  </pre>
+                  <CopyButton
+                    text="codeflash init-actions"
+                  />
+                </div>
+              </Card>
+            </div>
+          </div>
+
+          <div className="mt-8">
+            <p className="text-muted-foreground">
+              Need help? For more details check out our{" "}
+              <a
+                href="https://docs.codeflash.ai"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                documentation
+              </a>{" "}
+              or{" "}
+              <a
+                href="https://calendly.com/codeflash-saurabh/codeflash-setup"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                book a call
+              </a>{" "}
+              with the founder.
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}

js/cf-webapp/src/components/dashboard/sidebar.tsx

@@ -6,7 +6,7 @@ import { SignOut } from "@/components/ui/SignOut"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import React, { type JSX } from "react"
-import { BookText, KeyRound } from "lucide-react"
+import { BookText, KeyRound, CirclePlay} from "lucide-react"
 
 export function Sidebar({ className }: { className: string }): JSX.Element {
   const currentRoute = usePathname()
@@ -17,7 +17,15 @@ export function Sidebar({ className }: { className: string }): JSX.Element {
       <div className="space-y-4 py-4 grow">
         <div className="px-3 py-2">
           <div className="space-y-2 grid gap-y-1">
-
+            <Link href="/app/gettingstarted">
+              <Button
+                variant={currentRoute === "/app/gettingstarted" ? "secondary" : "ghost"}
+                className="w-full justify-start"
+              >
+                <CirclePlay size={16} className="mr-2 h-4 w-4" />
+                Getting Started
+              </Button>
+            </Link>
             <Link href="/app/apikeys">
               <Button
                 variant={currentRoute === "/app/apikeys" ? "secondary" : "ghost"}