Arihan/mar 50 dashboard usage page

README.md

@@ -21,14 +21,15 @@ Create a GitHub App for webhooks and repo access. Populate your **.env** with th
 2. Copy your app name, ID, and client secret. Add these to your **.env**.
 3. Callback URL: nGrok URL + GitHub auth endpoint eg. `https://abc.ngrok.app/api/auth/callback/github`
 4. Webhook URL: nGrok URL + handler path eg. `https://abc.ngrok.app/api/webhook/github`.
-6. Webhook secret: generate this with `openssl rand -hex 32`. Add it to your **.env**.
-7. Permissions: toggle **Issue: Read & Write** and **Pull Request: Read & Write**.
-8. Events: toggle **issues**, **issue comments**, and **pull requests**.
-9. Private key: generate a private key. Download it. Run the following command ([source](https://github.com/gr2m/universal-github-app-jwt?tab=readme-ov-file#converting-pkcs1-to-pkcs8)) to convert it to the right format:
+5. Webhook secret: generate this with `openssl rand -hex 32`. Add it to your **.env**.
+6. Permissions: toggle **Issue: Read & Write** and **Pull Request: Read & Write**.
+7. Events: toggle **issues**, **issue comments**, and **pull requests**.
+8. Private key: generate a private key. Download it. Run the following command ([source](https://github.com/gr2m/universal-github-app-jwt?tab=readme-ov-file#converting-pkcs1-to-pkcs8)) to convert it to the right format:
 
    ```sh
    openssl pkcs8 -topk8 -inform PEM -outform PEM -nocrypt -in private-key.pem -out private-key-pkcs8.key
    ```
+
    then copy **private-key-pkcs8.key**'s text contents to your **.env**.
 
 ## Dive In

app/api/webhook/github/route.ts

@@ -197,6 +197,7 @@ export const POST = async (req: Request) => {
 					name: payload?.repository?.name
 				},
 				select: {
+					id: true,
 					name: true,
 					customInstructions: true
 				}
@@ -210,6 +211,8 @@ export const POST = async (req: Request) => {
 	const instructions =
 		projects?.[0]?.customInstructions.map(ci => ci.content).join('. ') || ''
 
+	const projectId = projects?.[0]?.id
+
 	// Get GitHub app instance access token
 	const app = new App({
 		appId: env.GITHUB_APP_ID || '',
@@ -299,8 +302,8 @@ Your instructions: ${instructions || 'do nothing'}.
 		await maige({
 			input: prompt,
 			octokit,
-			prisma,
 			customerId,
+			projectId,
 			repoFullName: `${owner}/${name}`,
 			issueNumber: issue?.number,
 			issueId: issue?.node_id,

app/dashboard/(base)/usage/[[...metric]]/layout.tsx

@@ -0,0 +1,35 @@
+import {notFound} from 'next/navigation'
+import z from 'zod'
+import Charts from '~/components/dashboard/usage/charts'
+import ChartsLinks from '~/components/dashboard/usage/charts-links'
+
+const paramsSchema = z.enum(['runs', 'tokens'])
+
+export default async function RootLayout({
+	children,
+	params
+}: {
+	children: React.ReactNode
+	params: {
+		metric: string[] | undefined
+	}
+}) {
+	if (
+		params.metric &&
+		(params.metric.length > 1 ||
+			!paramsSchema.safeParse(params?.metric[0]).success)
+	)
+		return notFound()
+
+	const route = params.metric ? params.metric[0] : ''
+
+	return (
+		<div className='space-y-2'>
+			<ChartsLinks route={route} />
+			<div className='space-y-5'>
+				<Charts route={route} />
+				{children}
+			</div>
+		</div>
+	)
+}

app/dashboard/(base)/usage/[[...metric]]/loading.tsx

@@ -0,0 +1,12 @@
+import {Skeleton} from '~/components/ui/skeleton'
+
+type Props = {}
+
+export default function Loading({}: Props) {
+	return (
+		<div className='space-y-2'>
+			<Skeleton className='h-10' />
+			<Skeleton className='h-56' />
+		</div>
+	)
+}

app/dashboard/(base)/usage/[[...metric]]/page.tsx

@@ -0,0 +1,20 @@
+import UsageTable from '~/components/dashboard/usage/table-wrapper'
+
+export default async function Usage({
+	searchParams,
+	params
+}: {
+	searchParams: {[key: string]: string | string[] | undefined}
+	params: {
+		metric: string[] | undefined
+	}
+}) {
+	const route = params.metric ? params.metric[0] : ''
+
+	return (
+		<UsageTable
+			route={route}
+			searchParams={searchParams}
+		/>
+	)
+}

app/dashboard/repo/[projectId]/instructions/actions.ts

@@ -0,0 +1,26 @@
+'use server'
+
+import {revalidatePath} from 'next/cache'
+import {redirect} from 'next/navigation'
+
+export async function createInstruction(projectId: string, content: string) {
+	const req = await prisma.instruction.create({
+		data: {
+			projectId: projectId,
+			content: content,
+			creatorUsername: 'Dashboard'
+		}
+	})
+	revalidatePath(`/dashboard/repo/${projectId}/instructions`)
+	redirect(`/dashboard/repo/${projectId}/instructions#${req.id}`)
+}
+
+export async function deleteInstruction(projectId: string, id: string) {
+	await prisma.instruction.delete({
+		where: {
+			id: id
+		}
+	})
+	revalidatePath(`/dashboard/repo/${projectId}/instructions`)
+	redirect(`/dashboard/repo/${projectId}/instructions`)
+}

app/dashboard/repo/[projectId]/instructions/page.tsx

@@ -21,5 +21,10 @@ async function InstructionsWrapper({projectId}: {projectId: string}) {
 		}
 	})
 
-	return <Instructions instructions={instructions} />
+	return (
+		<Instructions
+			projectId={projectId}
+			instructions={instructions}
+		/>
+	)
 }

lib/agents/engineer.ts

@@ -3,6 +3,7 @@ import {Octokit} from '@octokit/core'
 import {initializeAgentExecutorWithOptions} from 'langchain/agents'
 import {ChatOpenAI} from 'langchain/chat_models/openai'
 import env from '~/env.mjs'
+import prisma from '~/prisma'
 import {codebaseSearch} from '~/tools/codeSearch'
 import commitCode from '~/tools/commitCode'
 import listFiles from '~/tools/listFiles'
@@ -11,23 +12,41 @@ import writeFile from '~/tools/writeFile'
 import {getInstallationId, getInstallationToken} from '~/utils/github'
 import {isDev} from '~/utils/index'
 
-const model = new ChatOpenAI({
-	modelName: 'gpt-4-1106-preview',
-	openAIApiKey: env.OPENAI_API_KEY,
-	temperature: 0.3
-})
-
 export async function engineer({
 	task,
 	repoFullName,
 	issueNumber,
-	customerId
+	customerId,
+	projectId
 }: {
 	task: string
 	repoFullName: string
 	issueNumber: number
 	customerId: string
+	projectId: string
 }) {
+	let tokens = {
+		prompt: 0,
+		completion: 0
+	}
+
+	const model = new ChatOpenAI({
+		modelName: 'gpt-4-1106-preview',
+		openAIApiKey: env.OPENAI_API_KEY,
+		temperature: 0.3,
+		callbacks: [
+			{
+				async handleLLMEnd(data) {
+					tokens = {
+						prompt: tokens.prompt + (data?.llmOutput?.tokenUsage?.promptTokens || 0),
+						completion:
+							tokens.completion + (data?.llmOutput?.tokenUsage?.completionTokens || 0)
+					}
+				}
+			}
+		]
+	})
+
 	const {content: title} = await model.call([
 		'Could you output a very concise PR title for this request?',
 		`Task: ${task}`
@@ -82,6 +101,23 @@ Your final output message should be the message that will be included in the pul
 		returnIntermediateSteps: isDev,
 		handleParsingErrors: true,
 		// verbose: true,
+		callbacks: [
+			{
+				async handleChainEnd() {
+					await prisma.usage.create({
+						data: {
+							projectId: projectId,
+							totalTokens: tokens.prompt + tokens.completion,
+							promptTokens: tokens.prompt,
+							completionTokens: tokens.completion,
+							action: 'Create some stuff with engineer',
+							agent: 'engineer',
+							model: 'gpt-4-1106-preview'
+						}
+					})
+				}
+			}
+		],
 		agentArgs: {
 			prefix
 		}

lib/agents/maige.ts

@@ -1,6 +1,7 @@
 import {initializeAgentExecutorWithOptions} from 'langchain/agents'
 import {ChatOpenAI} from 'langchain/chat_models/openai'
 import env from '~/env.mjs'
+import prisma from '~/prisma'
 import {codebaseSearch} from '~/tools/codeSearch'
 import commentTool from '~/tools/comment'
 import dispatchEngineer from '~/tools/dispatchEngineer'
@@ -10,17 +11,11 @@ import {labelTool} from '~/tools/label'
 import updateInstructionsTool from '~/tools/updateInstructions'
 import {isDev} from '~/utils/index'
 
-const model = new ChatOpenAI({
-	modelName: 'gpt-4-1106-preview',
-	openAIApiKey: env.OPENAI_API_KEY,
-	temperature: 0
-})
-
 export async function maige({
 	input,
 	octokit,
-	prisma,
 	customerId,
+	projectId,
 	repoFullName,
 	issueNumber,
 	issueId,
@@ -31,8 +26,8 @@ export async function maige({
 }: {
 	input: string
 	octokit: any
-	prisma: any
 	customerId: string
+	projectId: string
 	repoFullName: string
 	issueNumber?: number
 	issueId?: string
@@ -41,6 +36,29 @@ export async function maige({
 	comment: any
 	beta?: boolean
 }) {
+	let tokens = {
+		prompt: 0,
+		completion: 0
+	}
+
+	const model = new ChatOpenAI({
+		modelName: 'gpt-4-1106-preview',
+		openAIApiKey: env.OPENAI_API_KEY,
+		temperature: 0,
+		streaming: false,
+		callbacks: [
+			{
+				async handleLLMEnd(data) {
+					tokens = {
+						prompt: tokens.prompt + (data?.llmOutput?.tokenUsage?.promptTokens || 0),
+						completion:
+							tokens.completion + (data?.llmOutput?.tokenUsage?.completionTokens || 0)
+					}
+				}
+			}
+		]
+	})
+
 	const tools = [
 		labelTool({octokit, allLabels, issueId}),
 		updateInstructionsTool({
@@ -54,10 +72,12 @@ export async function maige({
 		}),
 		githubTool({octokit}),
 		codebaseSearch({customerId, repoFullName}),
-		...(beta ? [dispatchEngineer({issueNumber, repoFullName, customerId})] : []),
+		...(beta
+			? [dispatchEngineer({issueNumber, repoFullName, customerId, projectId})]
+			: []),
 		...(issueId ? [commentTool({octokit, issueId})] : []),
 		...(pullUrl && beta
-			? [dispatchReviewer({octokit, pullUrl, repoFullName, customerId})]
+			? [dispatchReviewer({octokit, pullUrl, repoFullName, customerId, projectId})]
 			: [])
 	]
 
@@ -84,7 +104,24 @@ All repo labels: ${allLabels
 		// verbose: true,
 		agentArgs: {
 			prefix
-		}
+		},
+		callbacks: [
+			{
+				async handleChainEnd() {
+					await prisma.usage.create({
+						data: {
+							projectId: projectId,
+							totalTokens: tokens.prompt + tokens.completion,
+							promptTokens: tokens.prompt,
+							completionTokens: tokens.completion,
+							action: 'Review an issue with maige',
+							agent: 'maige',
+							model: 'gpt-4-1106-preview'
+						}
+					})
+				}
+			}
+		]
 	})
 
 	const {output} = await executor.call({input})