sourcebot-dev · msukkari · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025
diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts
@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
  }
  })
  );
-
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
  withAuth((session) =>
  withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  } : {}),
  },
  include: {
- connections: true,
+ connections: {
+ include: {
+ connection: true,
+ }
+ }
  }
  });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  repoId: repo.id,
  repoName: repo.name,
  repoCloneUrl: repo.cloneUrl,
- linkedConnections: repo.connections.map((connection) => connection.connectionId),
+ linkedConnections: repo.connections.map(({ connection }) => ({
+ id: connection.id,
+ name: connection.name,
+ })),
  imageUrl: repo.imageUrl ?? undefined,
  indexedAt: repo.indexedAt ?? undefined,
  repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
  save_default_payment_method: 'on_subscription',
  },
  });
-
+
  if (!subscription) {
  return {
  statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

diff --git a/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx b/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx
@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
  return checkIfSecretExists(secretKey, domain);
  }, { message: "Secret not found" }),
  });
- }, [schema, domain]);
+ }, [schema, domain, additionalConfigValidation]);
 
  const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),

diff --git a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
  .slice(0, 10)
  .map(repo => (
  // Link to the first connection for the repo
- <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+ <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
  <div className="flex items-center justify-between px-3 py-2 
  bg-red-50 dark:bg-red-900/20 rounded-md
  border border-red-200/50 dark:border-red-800/50

diff --git a/packages/web/src/app/[domain]/components/progressNavIndicator.tsx b/packages/web/src/app/[domain]/components/progressNavIndicator.tsx
@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
  <div className="flex flex-col gap-2 pl-4">
  {inProgressRepos.slice(0, 10).map(item => (
  // Link to the first connection for the repo
- <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+ <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
  <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
  rounded-md text-sm text-green-700 dark:text-green-300 
  border border-green-200/50 dark:border-green-800/50

diff --git a/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx b/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx
@@ -49,13 +49,19 @@ export const RepoListItem = ({
  className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
  >
  <div className="flex flex-row items-center gap-2">
- <Image
- src={imageUrl ?? ""}
- alt={name}
- width={40}
- height={40}
- className="rounded-full"
- />
+ {imageUrl ? (
+ <Image
+ src={imageUrl}
+ alt={name}
+ width={32}
+ height={32}
+ className="object-cover"
+ />
+ ) : (
+ <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+ {name.charAt(0)}
+ </div>
+ )}
  <p className="font-medium">{name}</p>
  </div>
  <div className="flex flex-row items-center gap-4">

diff --git a/packages/web/src/app/[domain]/repos/addRepoButton.tsx b/packages/web/src/app/[domain]/repos/addRepoButton.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+ DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+ const [isOpen, setIsOpen] = useState(false)
+ const domain = useDomain()
+
+ return (
+ <>
+ <Button
+ onClick={() => setIsOpen(true)}
+ variant="ghost"
+ size="icon"
+ className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <PlusCircle className="h-4 w-4" />
+ </Button>
+
+ <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+ <DialogHeader className="px-6 py-4 border-b">
+ <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+ <DialogDescription className="text-sm text-muted-foreground mt-1">
+ Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="flex-1 overflow-y-auto p-6">
+ <ConnectionList className="w-full" />
+ </div>
+ <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+ <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+ <Link href={`/${domain}/connections`}>Add new connection</Link>
+ </Button>
+ <DialogClose asChild>
+ <Button variant="outline">Close</Button>
+ </DialogClose>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </>
+ )
+} 
diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts
@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
  }
  })
  );
-
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
  withAuth((session) =>
  withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  } : {}),
  },
  include: {
- connections: true,
+ connections: {
+ include: {
+ connection: true,
+ }
+ }
  }
  });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  repoId: repo.id,
  repoName: repo.name,
  repoCloneUrl: repo.cloneUrl,
- linkedConnections: repo.connections.map((connection) => connection.connectionId),
+ linkedConnections: repo.connections.map(({ connection }) => ({
+ id: connection.id,
+ name: connection.name,
+ })),
  imageUrl: repo.imageUrl ?? undefined,
  indexedAt: repo.indexedAt ?? undefined,
  repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
  save_default_payment_method: 'on_subscription',
  },
  });
-
+
  if (!subscription) {
  return {
  statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

diff --git a/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx b/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx
@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
  return checkIfSecretExists(secretKey, domain);
  }, { message: "Secret not found" }),
  });
- }, [schema, domain]);
+ }, [schema, domain, additionalConfigValidation]);
 
  const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),

diff --git a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
  .slice(0, 10)
  .map(repo => (
  // Link to the first connection for the repo
- <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+ <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
  <div className="flex items-center justify-between px-3 py-2 
  bg-red-50 dark:bg-red-900/20 rounded-md
  border border-red-200/50 dark:border-red-800/50

diff --git a/packages/web/src/app/[domain]/components/progressNavIndicator.tsx b/packages/web/src/app/[domain]/components/progressNavIndicator.tsx
@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
  <div className="flex flex-col gap-2 pl-4">
  {inProgressRepos.slice(0, 10).map(item => (
  // Link to the first connection for the repo
- <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+ <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
  <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
  rounded-md text-sm text-green-700 dark:text-green-300 
  border border-green-200/50 dark:border-green-800/50

diff --git a/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx b/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx
@@ -49,13 +49,19 @@ export const RepoListItem = ({
  className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
  >
  <div className="flex flex-row items-center gap-2">
- <Image
- src={imageUrl ?? ""}
- alt={name}
- width={40}
- height={40}
- className="rounded-full"
- />
+ {imageUrl ? (
+ <Image
+ src={imageUrl}
+ alt={name}
+ width={32}
+ height={32}
+ className="object-cover"
+ />
+ ) : (
+ <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+ {name.charAt(0)}
+ </div>
+ )}
  <p className="font-medium">{name}</p>
  </div>
  <div className="flex flex-row items-center gap-4">

diff --git a/packages/web/src/app/[domain]/repos/addRepoButton.tsx b/packages/web/src/app/[domain]/repos/addRepoButton.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+ DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+ const [isOpen, setIsOpen] = useState(false)
+ const domain = useDomain()
+
+ return (
+ <>
+ <Button
+ onClick={() => setIsOpen(true)}
+ variant="ghost"
+ size="icon"
+ className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <PlusCircle className="h-4 w-4" />
+ </Button>
+
+ <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+ <DialogHeader className="px-6 py-4 border-b">
+ <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+ <DialogDescription className="text-sm text-muted-foreground mt-1">
+ Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="flex-1 overflow-y-auto p-6">
+ <ConnectionList className="w-full" />
+ </div>
+ <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+ <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+ <Link href={`/${domain}/connections`}>Add new connection</Link>
+ </Button>
+ <DialogClose asChild>
+ <Button variant="outline">Close</Button>
+ </DialogClose>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </>
+ )
+} 
diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts
@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
  }
  })
  );
-
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
  withAuth((session) =>
  withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  } : {}),
  },
  include: {
- connections: true,
+ connections: {
+ include: {
+ connection: true,
+ }
+ }
  }
  });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  repoId: repo.id,
  repoName: repo.name,
  repoCloneUrl: repo.cloneUrl,
- linkedConnections: repo.connections.map((connection) => connection.connectionId),
+ linkedConnections: repo.connections.map(({ connection }) => ({
+ id: connection.id,
+ name: connection.name,
+ })),
  imageUrl: repo.imageUrl ?? undefined,
  indexedAt: repo.indexedAt ?? undefined,
  repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
  save_default_payment_method: 'on_subscription',
  },
  });
-
+
  if (!subscription) {
  return {
  statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

diff --git a/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx b/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx
@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
  return checkIfSecretExists(secretKey, domain);
  }, { message: "Secret not found" }),
  });
- }, [schema, domain]);
+ }, [schema, domain, additionalConfigValidation]);
 
  const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),

diff --git a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
  .slice(0, 10)
  .map(repo => (
  // Link to the first connection for the repo
- <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+ <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
  <div className="flex items-center justify-between px-3 py-2 
  bg-red-50 dark:bg-red-900/20 rounded-md
  border border-red-200/50 dark:border-red-800/50

diff --git a/packages/web/src/app/[domain]/components/progressNavIndicator.tsx b/packages/web/src/app/[domain]/components/progressNavIndicator.tsx
@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
  <div className="flex flex-col gap-2 pl-4">
  {inProgressRepos.slice(0, 10).map(item => (
  // Link to the first connection for the repo
- <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+ <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
  <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
  rounded-md text-sm text-green-700 dark:text-green-300 
  border border-green-200/50 dark:border-green-800/50

diff --git a/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx b/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx
@@ -49,13 +49,19 @@ export const RepoListItem = ({
  className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
  >
  <div className="flex flex-row items-center gap-2">
- <Image
- src={imageUrl ?? ""}
- alt={name}
- width={40}
- height={40}
- className="rounded-full"
- />
+ {imageUrl ? (
+ <Image
+ src={imageUrl}
+ alt={name}
+ width={32}
+ height={32}
+ className="object-cover"
+ />
+ ) : (
+ <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+ {name.charAt(0)}
+ </div>
+ )}
  <p className="font-medium">{name}</p>
  </div>
  <div className="flex flex-row items-center gap-4">

diff --git a/packages/web/src/app/[domain]/repos/addRepoButton.tsx b/packages/web/src/app/[domain]/repos/addRepoButton.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+ DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+ const [isOpen, setIsOpen] = useState(false)
+ const domain = useDomain()
+
+ return (
+ <>
+ <Button
+ onClick={() => setIsOpen(true)}
+ variant="ghost"
+ size="icon"
+ className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <PlusCircle className="h-4 w-4" />
+ </Button>
+
+ <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+ <DialogHeader className="px-6 py-4 border-b">
+ <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+ <DialogDescription className="text-sm text-muted-foreground mt-1">
+ Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="flex-1 overflow-y-auto p-6">
+ <ConnectionList className="w-full" />
+ </div>
+ <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+ <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+ <Link href={`/${domain}/connections`}>Add new connection</Link>
+ </Button>
+ <DialogClose asChild>
+ <Button variant="outline">Close</Button>
+ </DialogClose>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </>
+ )
+} 
diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts
@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
  }
  })
  );
-
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
  withAuth((session) =>
  withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  } : {}),
  },
  include: {
- connections: true,
+ connections: {
+ include: {
+ connection: true,
+ }
+ }
  }
  });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  repoId: repo.id,
  repoName: repo.name,
  repoCloneUrl: repo.cloneUrl,
- linkedConnections: repo.connections.map((connection) => connection.connectionId),
+ linkedConnections: repo.connections.map(({ connection }) => ({
+ id: connection.id,
+ name: connection.name,
+ })),
  imageUrl: repo.imageUrl ?? undefined,
  indexedAt: repo.indexedAt ?? undefined,
  repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
  save_default_payment_method: 'on_subscription',
  },
  });
-
+
  if (!subscription) {
  return {
  statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

diff --git a/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx b/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx
@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
  return checkIfSecretExists(secretKey, domain);
  }, { message: "Secret not found" }),
  });
- }, [schema, domain]);
+ }, [schema, domain, additionalConfigValidation]);
 
  const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),

diff --git a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
  .slice(0, 10)
  .map(repo => (
  // Link to the first connection for the repo
- <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+ <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
  <div className="flex items-center justify-between px-3 py-2 
  bg-red-50 dark:bg-red-900/20 rounded-md
  border border-red-200/50 dark:border-red-800/50

diff --git a/packages/web/src/app/[domain]/components/progressNavIndicator.tsx b/packages/web/src/app/[domain]/components/progressNavIndicator.tsx
@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
  <div className="flex flex-col gap-2 pl-4">
  {inProgressRepos.slice(0, 10).map(item => (
  // Link to the first connection for the repo
- <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+ <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
  <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
  rounded-md text-sm text-green-700 dark:text-green-300 
  border border-green-200/50 dark:border-green-800/50

diff --git a/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx b/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx
@@ -49,13 +49,19 @@ export const RepoListItem = ({
  className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
  >
  <div className="flex flex-row items-center gap-2">
- <Image
- src={imageUrl ?? ""}
- alt={name}
- width={40}
- height={40}
- className="rounded-full"
- />
+ {imageUrl ? (
+ <Image
+ src={imageUrl}
+ alt={name}
+ width={32}
+ height={32}
+ className="object-cover"
+ />
+ ) : (
+ <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+ {name.charAt(0)}
+ </div>
+ )}
  <p className="font-medium">{name}</p>
  </div>
  <div className="flex flex-row items-center gap-4">

diff --git a/packages/web/src/app/[domain]/repos/addRepoButton.tsx b/packages/web/src/app/[domain]/repos/addRepoButton.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+ DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+ const [isOpen, setIsOpen] = useState(false)
+ const domain = useDomain()
+
+ return (
+ <>
+ <Button
+ onClick={() => setIsOpen(true)}
+ variant="ghost"
+ size="icon"
+ className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <PlusCircle className="h-4 w-4" />
+ </Button>
+
+ <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+ <DialogHeader className="px-6 py-4 border-b">
+ <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+ <DialogDescription className="text-sm text-muted-foreground mt-1">
+ Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="flex-1 overflow-y-auto p-6">
+ <ConnectionList className="w-full" />
+ </div>
+ <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+ <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+ <Link href={`/${domain}/connections`}>Add new connection</Link>
+ </Button>
+ <DialogClose asChild>
+ <Button variant="outline">Close</Button>
+ </DialogClose>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </>
+ )
+} 
diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts
@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
  }
  })
  );
-
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
  withAuth((session) =>
  withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  } : {}),
  },
  include: {
- connections: true,
+ connections: {
+ include: {
+ connection: true,
+ }
+ }
  }
  });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  repoId: repo.id,
  repoName: repo.name,
  repoCloneUrl: repo.cloneUrl,
- linkedConnections: repo.connections.map((connection) => connection.connectionId),
+ linkedConnections: repo.connections.map(({ connection }) => ({
+ id: connection.id,
+ name: connection.name,
+ })),
  imageUrl: repo.imageUrl ?? undefined,
  indexedAt: repo.indexedAt ?? undefined,
  repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
  save_default_payment_method: 'on_subscription',
  },
  });
-
+
  if (!subscription) {
  return {
  statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

diff --git a/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx b/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx
@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
  return checkIfSecretExists(secretKey, domain);
  }, { message: "Secret not found" }),
  });
- }, [schema, domain]);
+ }, [schema, domain, additionalConfigValidation]);
 
  const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),

diff --git a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
  .slice(0, 10)
  .map(repo => (
  // Link to the first connection for the repo
- <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+ <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
  <div className="flex items-center justify-between px-3 py-2 
  bg-red-50 dark:bg-red-900/20 rounded-md
  border border-red-200/50 dark:border-red-800/50

diff --git a/packages/web/src/app/[domain]/components/progressNavIndicator.tsx b/packages/web/src/app/[domain]/components/progressNavIndicator.tsx
@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
  <div className="flex flex-col gap-2 pl-4">
  {inProgressRepos.slice(0, 10).map(item => (
  // Link to the first connection for the repo
- <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+ <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
  <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
  rounded-md text-sm text-green-700 dark:text-green-300 
  border border-green-200/50 dark:border-green-800/50

diff --git a/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx b/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx
@@ -49,13 +49,19 @@ export const RepoListItem = ({
  className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
  >
  <div className="flex flex-row items-center gap-2">
- <Image
- src={imageUrl ?? ""}
- alt={name}
- width={40}
- height={40}
- className="rounded-full"
- />
+ {imageUrl ? (
+ <Image
+ src={imageUrl}
+ alt={name}
+ width={32}
+ height={32}
+ className="object-cover"
+ />
+ ) : (
+ <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+ {name.charAt(0)}
+ </div>
+ )}
  <p className="font-medium">{name}</p>
  </div>
  <div className="flex flex-row items-center gap-4">

diff --git a/packages/web/src/app/[domain]/repos/addRepoButton.tsx b/packages/web/src/app/[domain]/repos/addRepoButton.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+ DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+ const [isOpen, setIsOpen] = useState(false)
+ const domain = useDomain()
+
+ return (
+ <>
+ <Button
+ onClick={() => setIsOpen(true)}
+ variant="ghost"
+ size="icon"
+ className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <PlusCircle className="h-4 w-4" />
+ </Button>
+
+ <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+ <DialogHeader className="px-6 py-4 border-b">
+ <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+ <DialogDescription className="text-sm text-muted-foreground mt-1">
+ Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="flex-1 overflow-y-auto p-6">
+ <ConnectionList className="w-full" />
+ </div>
+ <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+ <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+ <Link href={`/${domain}/connections`}>Add new connection</Link>
+ </Button>
+ <DialogClose asChild>
+ <Button variant="outline">Close</Button>
+ </DialogClose>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </>
+ )
+} 
diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts
@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
  }
  })
  );
-
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
  withAuth((session) =>
  withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  } : {}),
  },
  include: {
- connections: true,
+ connections: {
+ include: {
+ connection: true,
+ }
+ }
  }
  });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  repoId: repo.id,
  repoName: repo.name,
  repoCloneUrl: repo.cloneUrl,
- linkedConnections: repo.connections.map((connection) => connection.connectionId),
+ linkedConnections: repo.connections.map(({ connection }) => ({
+ id: connection.id,
+ name: connection.name,
+ })),
  imageUrl: repo.imageUrl ?? undefined,
  indexedAt: repo.indexedAt ?? undefined,
  repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
  save_default_payment_method: 'on_subscription',
  },
  });
-
+
  if (!subscription) {
  return {
  statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

diff --git a/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx b/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx
@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
  return checkIfSecretExists(secretKey, domain);
  }, { message: "Secret not found" }),
  });
- }, [schema, domain]);
+ }, [schema, domain, additionalConfigValidation]);
 
  const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),

diff --git a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
  .slice(0, 10)
  .map(repo => (
  // Link to the first connection for the repo
- <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+ <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
  <div className="flex items-center justify-between px-3 py-2 
  bg-red-50 dark:bg-red-900/20 rounded-md
  border border-red-200/50 dark:border-red-800/50

diff --git a/packages/web/src/app/[domain]/components/progressNavIndicator.tsx b/packages/web/src/app/[domain]/components/progressNavIndicator.tsx
@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
  <div className="flex flex-col gap-2 pl-4">
  {inProgressRepos.slice(0, 10).map(item => (
  // Link to the first connection for the repo
- <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+ <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
  <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
  rounded-md text-sm text-green-700 dark:text-green-300 
  border border-green-200/50 dark:border-green-800/50

diff --git a/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx b/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx
@@ -49,13 +49,19 @@ export const RepoListItem = ({
  className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
  >
  <div className="flex flex-row items-center gap-2">
- <Image
- src={imageUrl ?? ""}
- alt={name}
- width={40}
- height={40}
- className="rounded-full"
- />
+ {imageUrl ? (
+ <Image
+ src={imageUrl}
+ alt={name}
+ width={32}
+ height={32}
+ className="object-cover"
+ />
+ ) : (
+ <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+ {name.charAt(0)}
+ </div>
+ )}
  <p className="font-medium">{name}</p>
  </div>
  <div className="flex flex-row items-center gap-4">

diff --git a/packages/web/src/app/[domain]/repos/addRepoButton.tsx b/packages/web/src/app/[domain]/repos/addRepoButton.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+ DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+ const [isOpen, setIsOpen] = useState(false)
+ const domain = useDomain()
+
+ return (
+ <>
+ <Button
+ onClick={() => setIsOpen(true)}
+ variant="ghost"
+ size="icon"
+ className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <PlusCircle className="h-4 w-4" />
+ </Button>
+
+ <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+ <DialogHeader className="px-6 py-4 border-b">
+ <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+ <DialogDescription className="text-sm text-muted-foreground mt-1">
+ Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="flex-1 overflow-y-auto p-6">
+ <ConnectionList className="w-full" />
+ </div>
+ <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+ <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+ <Link href={`/${domain}/connections`}>Add new connection</Link>
+ </Button>
+ <DialogClose asChild>
+ <Button variant="outline">Close</Button>
+ </DialogClose>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </>
+ )
+} 
diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts
@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
  }
  })
  );
-
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
  withAuth((session) =>
  withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  } : {}),
  },
  include: {
- connections: true,
+ connections: {
+ include: {
+ connection: true,
+ }
+ }
  }
  });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  repoId: repo.id,
  repoName: repo.name,
  repoCloneUrl: repo.cloneUrl,
- linkedConnections: repo.connections.map((connection) => connection.connectionId),
+ linkedConnections: repo.connections.map(({ connection }) => ({
+ id: connection.id,
+ name: connection.name,
+ })),
  imageUrl: repo.imageUrl ?? undefined,
  indexedAt: repo.indexedAt ?? undefined,
  repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
  save_default_payment_method: 'on_subscription',
  },
  });
-
+
  if (!subscription) {
  return {
  statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

diff --git a/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx b/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx
@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
  return checkIfSecretExists(secretKey, domain);
  }, { message: "Secret not found" }),
  });
- }, [schema, domain]);
+ }, [schema, domain, additionalConfigValidation]);
 
  const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),

diff --git a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
  .slice(0, 10)
  .map(repo => (
  // Link to the first connection for the repo
- <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+ <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
  <div className="flex items-center justify-between px-3 py-2 
  bg-red-50 dark:bg-red-900/20 rounded-md
  border border-red-200/50 dark:border-red-800/50

diff --git a/packages/web/src/app/[domain]/components/progressNavIndicator.tsx b/packages/web/src/app/[domain]/components/progressNavIndicator.tsx
@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
  <div className="flex flex-col gap-2 pl-4">
  {inProgressRepos.slice(0, 10).map(item => (
  // Link to the first connection for the repo
- <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+ <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
  <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
  rounded-md text-sm text-green-700 dark:text-green-300 
  border border-green-200/50 dark:border-green-800/50

diff --git a/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx b/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx
@@ -49,13 +49,19 @@ export const RepoListItem = ({
  className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
  >
  <div className="flex flex-row items-center gap-2">
- <Image
- src={imageUrl ?? ""}
- alt={name}
- width={40}
- height={40}
- className="rounded-full"
- />
+ {imageUrl ? (
+ <Image
+ src={imageUrl}
+ alt={name}
+ width={32}
+ height={32}
+ className="object-cover"
+ />
+ ) : (
+ <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+ {name.charAt(0)}
+ </div>
+ )}
  <p className="font-medium">{name}</p>
  </div>
  <div className="flex flex-row items-center gap-4">

diff --git a/packages/web/src/app/[domain]/repos/addRepoButton.tsx b/packages/web/src/app/[domain]/repos/addRepoButton.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+ DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+ const [isOpen, setIsOpen] = useState(false)
+ const domain = useDomain()
+
+ return (
+ <>
+ <Button
+ onClick={() => setIsOpen(true)}
+ variant="ghost"
+ size="icon"
+ className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <PlusCircle className="h-4 w-4" />
+ </Button>
+
+ <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+ <DialogHeader className="px-6 py-4 border-b">
+ <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+ <DialogDescription className="text-sm text-muted-foreground mt-1">
+ Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="flex-1 overflow-y-auto p-6">
+ <ConnectionList className="w-full" />
+ </div>
+ <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+ <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+ <Link href={`/${domain}/connections`}>Add new connection</Link>
+ </Button>
+ <DialogClose asChild>
+ <Button variant="outline">Close</Button>
+ </DialogClose>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </>
+ )
+} 
diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts
@@ -147,7 +147,7 @@ export const completeOnboarding = async (domain: string): Promise<{ success: boo
  }
  })
  );
-
+
 export const getSecrets = (domain: string): Promise<{ createdAt: Date; key: string; }[] | ServiceError> =>
  withAuth((session) =>
  withOrgMembership(session, domain, async ({ orgId }) => {
@@ -321,7 +321,11 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  } : {}),
  },
  include: {
- connections: true,
+ connections: {
+ include: {
+ connection: true,
+ }
+ }
  }
  });
 
@@ -330,7 +334,10 @@ export const getRepos = async (domain: string, filter: { status?: RepoIndexingSt
  repoId: repo.id,
  repoName: repo.name,
  repoCloneUrl: repo.cloneUrl,
- linkedConnections: repo.connections.map((connection) => connection.connectionId),
+ linkedConnections: repo.connections.map(({ connection }) => ({
+ id: connection.id,
+ name: connection.name,
+ })),
  imageUrl: repo.imageUrl ?? undefined,
  indexedAt: repo.indexedAt ?? undefined,
  repoIndexingStatus: repo.repoIndexingStatus,
@@ -883,7 +890,7 @@ export const createOnboardingSubscription = async (domain: string) =>
  save_default_payment_method: 'on_subscription',
  },
  });
-
+
  if (!subscription) {
  return {
  statusCode: StatusCodes.INTERNAL_SERVER_ERROR,

diff --git a/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx b/.../web/src/app/[domain]/components/connectionCreationForms/sharedConnectionCreationForm.tsx
@@ -67,7 +67,7 @@ export default function SharedConnectionCreationForm<T>({
  return checkIfSecretExists(secretKey, domain);
  }, { message: "Secret not found" }),
  });
- }, [schema, domain]);
+ }, [schema, domain, additionalConfigValidation]);
 
  const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),

diff --git a/packages/web/src/app/[domain]/components/errorNavIndicator.tsx b/packages/web/src/app/[domain]/components/errorNavIndicator.tsx
@@ -97,7 +97,7 @@ export const ErrorNavIndicator = () => {
  .slice(0, 10)
  .map(repo => (
  // Link to the first connection for the repo
- <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0]}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
+ <Link key={repo.repoId} href={`/${domain}/connections/${repo.linkedConnections[0].id}`} onClick={() => captureEvent('wa_error_nav_job_pressed', {})}>
  <div className="flex items-center justify-between px-3 py-2 
  bg-red-50 dark:bg-red-900/20 rounded-md
  border border-red-200/50 dark:border-red-800/50

diff --git a/packages/web/src/app/[domain]/components/progressNavIndicator.tsx b/packages/web/src/app/[domain]/components/progressNavIndicator.tsx
@@ -50,7 +50,7 @@ export const ProgressNavIndicator = () => {
  <div className="flex flex-col gap-2 pl-4">
  {inProgressRepos.slice(0, 10).map(item => (
  // Link to the first connection for the repo
- <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0]}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
+ <Link key={item.repoId} href={`/${domain}/connections/${item.linkedConnections[0].id}`} onClick={() => captureEvent('wa_progress_nav_job_pressed', {})}>
  <div className="flex items-center gap-2 px-3 py-2 bg-green-50 dark:bg-green-900/20 
  rounded-md text-sm text-green-700 dark:text-green-300 
  border border-green-200/50 dark:border-green-800/50

diff --git a/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx b/packages/web/src/app/[domain]/connections/[id]/components/repoListItem.tsx
@@ -49,13 +49,19 @@ export const RepoListItem = ({
  className="flex flex-row items-center p-4 border rounded-lg bg-background justify-between"
  >
  <div className="flex flex-row items-center gap-2">
- <Image
- src={imageUrl ?? ""}
- alt={name}
- width={40}
- height={40}
- className="rounded-full"
- />
+ {imageUrl ? (
+ <Image
+ src={imageUrl}
+ alt={name}
+ width={32}
+ height={32}
+ className="object-cover"
+ />
+ ) : (
+ <div className="h-8 w-8 flex items-center justify-center bg-muted text-xs font-medium uppercase text-muted-foreground rounded-md">
+ {name.charAt(0)}
+ </div>
+ )}
  <p className="font-medium">{name}</p>
  </div>
  <div className="flex flex-row items-center gap-4">

diff --git a/packages/web/src/app/[domain]/repos/addRepoButton.tsx b/packages/web/src/app/[domain]/repos/addRepoButton.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { PlusCircle } from "lucide-react"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogClose,
+ DialogFooter,
+} from "@/components/ui/dialog"
+import { useState } from "react"
+import { ConnectionList } from "../connections/components/connectionList"
+import { useDomain } from "@/hooks/useDomain"
+import Link from "next/link";
+
+export function AddRepoButton() {
+ const [isOpen, setIsOpen] = useState(false)
+ const domain = useDomain()
+
+ return (
+ <>
+ <Button
+ onClick={() => setIsOpen(true)}
+ variant="ghost"
+ size="icon"
+ className="h-8 w-8 ml-2 text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <PlusCircle className="h-4 w-4" />
+ </Button>
+
+ <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ <DialogContent className="sm:max-w-[800px] max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+ <DialogHeader className="px-6 py-4 border-b">
+ <DialogTitle className="text-xl font-semibold">Add a New Repository</DialogTitle>
+ <DialogDescription className="text-sm text-muted-foreground mt-1">
+ Repositories are added to Sourcebot using <span className="text-primary">connections</span>. To add a new repo, add it to an existing connection or create a new one.
+ </DialogDescription>
+ </DialogHeader>
+ <div className="flex-1 overflow-y-auto p-6">
+ <ConnectionList className="w-full" />
+ </div>
+ <DialogFooter className="flex justify-between items-center border-t p-4 px-6">
+ <Button asChild variant="default" className="bg-primary hover:bg-primary/90">
+ <Link href={`/${domain}/connections`}>Add new connection</Link>
+ </Button>
+ <DialogClose asChild>
+ <Button variant="outline">Close</Button>
+ </DialogClose>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ </>
+ )
+}