From 4442799f6cdf4cc35cb53aed71282afde1c2135b Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Wed, 20 Nov 2024 18:14:49 +0100
Subject: [PATCH 01/24] wip

---
 apps/postgres-new/sw.ts         | 9 +++++++++
 apps/postgres-new/tsconfig.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 apps/postgres-new/sw.ts

diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
new file mode 100644
index 00000000..f4b2313e
--- /dev/null
+++ b/apps/postgres-new/sw.ts
@@ -0,0 +1,9 @@
+export type {}
+declare const self: ServiceWorkerGlobalScope
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.url.includes('/api/chat')) {
+  }
+
+  event.respondWith(fetch(event.request))
+})
diff --git a/apps/postgres-new/tsconfig.json b/apps/postgres-new/tsconfig.json
index d506c8ec..5cb519b6 100644
--- a/apps/postgres-new/tsconfig.json
+++ b/apps/postgres-new/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "esnext", "webworker"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,

From ce4070bd1538bc9369c63574fd91906cf87be910 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Thu, 21 Nov 2024 15:31:09 +0100
Subject: [PATCH 02/24] wip

---
 .../components/model/set-model-dialog.tsx     | 130 +++++++++++++
 apps/postgres-new/components/sidebar.tsx      |  34 ++++
 apps/postgres-new/components/ui/form.tsx      | 178 ++++++++++++++++++
 apps/postgres-new/lib/tools.ts                |   2 +-
 apps/postgres-new/package.json                |   3 +
 apps/postgres-new/sw.ts                       |  86 ++++++++-
 package-lock.json                             |  34 ++++
 7 files changed, 464 insertions(+), 3 deletions(-)
 create mode 100644 apps/postgres-new/components/model/set-model-dialog.tsx
 create mode 100644 apps/postgres-new/components/ui/form.tsx

diff --git a/apps/postgres-new/components/model/set-model-dialog.tsx b/apps/postgres-new/components/model/set-model-dialog.tsx
new file mode 100644
index 00000000..55a86909
--- /dev/null
+++ b/apps/postgres-new/components/model/set-model-dialog.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import * as kv from 'idb-keyval'
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '~/components/ui/dialog'
+import { Input } from '~/components/ui/input'
+import { Button } from '../ui/button'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
+import { Brain } from 'lucide-react'
+
+const formSchema = z.object({
+  apiKey: z.string().min(1).optional(),
+  baseUrl: z.string().min(1),
+  model: z.string().min(1),
+})
+
+type FormSchema = z.infer<typeof formSchema>
+
+function SetModelForm(props: { id: string; onSubmit: (values: FormSchema) => void }) {
+  const form = useForm<FormSchema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: async () => {
+      const model = await kv.get('model')
+      return model
+    },
+  })
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    await kv.set('model', values)
+    props.onSubmit(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form id={props.id} onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="baseUrl"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Base URL</FormLabel>
+              <FormControl>
+                <Input placeholder="http://localhost:11434/v1" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="apiKey"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>API Key (optional)</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="model"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Model</FormLabel>
+              <FormControl>
+                <Input placeholder="llama3.1:70b" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  )
+}
+
+export type SetModelDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm?: () => void
+}
+
+export function SetModelDialog(props: SetModelDialogProps) {
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex gap-2 items-center mb-4">
+            <Brain /> Set an external model
+          </DialogTitle>
+          <DialogDescription className="flex flex-col gap-4">
+            You can set your own external model compatible with the OpenAI API. Your model
+            informations will be saved in your browser.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="my-1 border-b" />
+        <SetModelForm
+          id="set-model-form"
+          onSubmit={() => {
+            props.onOpenChange(false)
+          }}
+        />
+        <DialogFooter className="mt-1">
+          <Button
+            variant="secondary"
+            onClick={() => {
+              props.onOpenChange(false)
+            }}
+          >
+            Cancel
+          </Button>
+          <Button form="set-model-form">Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx
index fd1fec09..b6c41ea7 100644
--- a/apps/postgres-new/components/sidebar.tsx
+++ b/apps/postgres-new/components/sidebar.tsx
@@ -5,6 +5,7 @@ import { AnimatePresence, m } from 'framer-motion'
 import {
   ArrowLeftToLine,
   ArrowRightToLine,
+  Brain,
   Database as DbIcon,
   Download,
   Loader,
@@ -55,6 +56,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from './ui/dropdown-menu'
+import { SetModelDialog } from './model/set-model-dialog'
 
 export default function Sidebar() {
   const {
@@ -70,6 +72,7 @@ export default function Sidebar() {
   let { id: currentDatabaseId } = useParams<{ id: string }>()
   const router = useRouter()
   const [showSidebar, setShowSidebar] = useState(true)
+  const [isSetModelDialogOpen, setIsSetModelDialogOpen] = useState(false)
 
   const { data: databases, isLoading: isLoadingDatabases } = useMergedDatabases()
 
@@ -106,6 +109,7 @@ export default function Sidebar() {
           </div>
         </DialogContent>
       </Dialog>
+      <SetModelDialog open={isSetModelDialogOpen} onOpenChange={setIsSetModelDialogOpen} />
       <AnimatePresence initial={false} mode="popLayout">
         {showSidebar && (
           <m.div
@@ -202,6 +206,18 @@ export default function Sidebar() {
                 )}
               </div>
             )}
+            <m.div layout="position" layoutId="set-external-model-button">
+              <Button
+                className="w-full gap-2"
+                variant="outline"
+                onClick={() => {
+                  setIsSetModelDialogOpen(true)
+                }}
+              >
+                <Brain size={18} strokeWidth={2} />
+                Set external model
+              </Button>
+            </m.div>
             <m.div layout="position" layoutId="theme-dropdown">
               <ThemeDropdown className="w-full" />
             </m.div>
@@ -267,6 +283,24 @@ export default function Sidebar() {
             </Tooltip>
           </div>
           <div className="flex flex-col gap-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <m.div layout="position" layoutId="set-external-model-button">
+                  <Button
+                    size={'icon'}
+                    variant="outline"
+                    onClick={() => {
+                      setIsSetModelDialogOpen(true)
+                    }}
+                  >
+                    <Brain size={16} strokeWidth={2} />
+                  </Button>
+                </m.div>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <p>Set external model</p>
+              </TooltipContent>
+            </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
                 <m.div layout="position" layoutId="theme-dropdown">
diff --git a/apps/postgres-new/components/ui/form.tsx b/apps/postgres-new/components/ui/form.tsx
new file mode 100644
index 00000000..37930795
--- /dev/null
+++ b/apps/postgres-new/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "~/lib/utils"
+import { Label } from "~/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/apps/postgres-new/lib/tools.ts b/apps/postgres-new/lib/tools.ts
index 8b51b02c..db376812 100644
--- a/apps/postgres-new/lib/tools.ts
+++ b/apps/postgres-new/lib/tools.ts
@@ -1,7 +1,7 @@
 import { CoreTool } from 'ai'
 import { codeBlock } from 'common-tags'
 import { z } from 'zod'
-import { reportSchema, resultsSchema, tableSchema, tabsSchema } from './schema'
+import { reportSchema, resultsSchema, tableSchema } from './schema'
 
 const successResultSchema = z.object({
   success: z.literal(true),
diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json
index ff03b10c..19a1514b 100644
--- a/apps/postgres-new/package.json
+++ b/apps/postgres-new/package.json
@@ -16,6 +16,7 @@
     "@database.build/deploy": "*",
     "@electric-sql/pglite": "^0.2.9",
     "@gregnr/postgres-meta": "^0.82.0-dev.2",
+    "@hookform/resolvers": "^3.9.1",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.2",
@@ -46,6 +47,7 @@
     "date-fns": "^3.6.0",
     "framer-motion": "^11.2.10",
     "highlightjs-curl": "^1.3.0",
+    "idb-keyval": "^6.2.1",
     "katex": "^0.16.10",
     "libpg-query": "npm:@gregnr/libpg-query@15.2.0-rc.deparse.3",
     "lodash": "^4.17.21",
@@ -58,6 +60,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
     "react-error-boundary": "^4.0.13",
+    "react-hook-form": "^7.53.2",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-use": "^17.5.1",
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index f4b2313e..1dc70de7 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -1,8 +1,90 @@
+import { createOpenAI } from '@ai-sdk/openai'
+import * as kv from 'idb-keyval'
+import { convertToCoreMessages, streamText, ToolInvocation } from 'ai'
+import { codeBlock } from 'common-tags'
+import { convertToCoreTools, maxMessageContext, maxRowLimit, tools } from '~/lib/tools'
+
+type Message = {
+  role: 'user' | 'assistant'
+  content: string
+  toolInvocations?: (ToolInvocation & { result: any })[]
+}
+
+const chatModel = process.env.OPENAI_MODEL ?? 'gpt-4o-2024-08-06'
+
+// Configure OpenAI client with custom base URL
+const openai = createOpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+  baseURL: process.env.OPENAI_API_BASE ?? 'https://api.openai.com/v1',
+  compatibility: 'strict',
+})
+
 export type {}
 declare const self: ServiceWorkerGlobalScope
 
-self.addEventListener('fetch', (event) => {
-  if (event.request.url.includes('/api/chat')) {
+self.addEventListener('fetch', async (event) => {
+  const hasLocalModel = await kv.get('model')
+  const url = new URL(event.request.url)
+  const isChatRoute = url.pathname === '/api/chat' && event.request.method === 'POST'
+
+  if (hasLocalModel && isChatRoute) {
+    const { messages }: { messages: Message[] } = await event.request.json()
+
+    // Trim the message context sent to the LLM to mitigate token abuse
+    const trimmedMessageContext = messages.slice(-maxMessageContext)
+
+    const coreMessages = convertToCoreMessages(trimmedMessageContext)
+    const coreTools = convertToCoreTools(tools)
+
+    const result = await streamText({
+      system: codeBlock`
+      You are a helpful database assistant. Under the hood you have access to an in-browser Postgres database called PGlite (https://github.com/electric-sql/pglite).
+      Some special notes about this database:
+      - foreign data wrappers are not supported
+      - the following extensions are available:
+        - plpgsql [pre-enabled]
+        - vector (https://github.com/pgvector/pgvector) [pre-enabled]
+          - use <=> for cosine distance (default to this)
+          - use <#> for negative inner product
+          - use <-> for L2 distance
+          - use <+> for L1 distance
+          - note queried vectors will be truncated/redacted due to their size - export as CSV if the full vector is required
+
+      When generating tables, do the following:
+      - For primary keys, always use "id bigint primary key generated always as identity" (not serial)
+      - Prefer 'text' over 'varchar'
+      - Keep explanations brief but helpful
+      - Don't repeat yourself after creating the table
+
+      When creating sample data:
+      - Make the data realistic, including joined data
+      - Check for existing records/conflicts in the table
+
+      When querying data, limit to 5 by default. The maximum number of rows you're allowed to fetch is ${maxRowLimit} (to protect AI from token abuse).
+      If the user needs to fetch more than ${maxRowLimit} rows at once, they can export the query as a CSV.
+
+      When performing FTS, always use 'simple' (languages aren't available).
+
+      When importing CSVs try to solve the problem yourself (eg. use a generic text column, then refine)
+      vs. asking the user to change the CSV. No need to select rows after importing.
+
+      You also know math. All math equations and expressions must be written in KaTex and must be wrapped in double dollar \`$$\`:
+        - Inline: $$\\sqrt{26}$$
+        - Multiline:
+            $$
+            \\sqrt{26}
+            $$
+
+      No images are allowed. Do not try to generate or link images, including base64 data URLs.
+
+      Feel free to suggest corrections for suspected typos.
+    `,
+      model: openai(chatModel),
+      messages: coreMessages,
+      tools: coreTools,
+    })
+
+    return event.respondWith(result.toAIStreamResponse())
   }
 
   event.respondWith(fetch(event.request))
diff --git a/package-lock.json b/package-lock.json
index 3785aad2..96a04f44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -116,6 +116,7 @@
         "@database.build/deploy": "*",
         "@electric-sql/pglite": "^0.2.9",
         "@gregnr/postgres-meta": "^0.82.0-dev.2",
+        "@hookform/resolvers": "^3.9.1",
         "@monaco-editor/react": "^4.6.0",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-alert-dialog": "^1.1.2",
@@ -146,6 +147,7 @@
         "date-fns": "^3.6.0",
         "framer-motion": "^11.2.10",
         "highlightjs-curl": "^1.3.0",
+        "idb-keyval": "^6.2.1",
         "katex": "^0.16.10",
         "libpg-query": "npm:@gregnr/libpg-query@15.2.0-rc.deparse.3",
         "lodash": "^4.17.21",
@@ -158,6 +160,7 @@
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18",
         "react-error-boundary": "^4.0.13",
+        "react-hook-form": "^7.53.2",
         "react-markdown": "^9.0.1",
         "react-syntax-highlighter": "^15.5.0",
         "react-use": "^17.5.1",
@@ -2160,6 +2163,15 @@
         "zod": "^3.19.1"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.1.tgz",
+      "integrity": "sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@huggingface/jinja": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.2.2.tgz",
@@ -9837,6 +9849,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/idb-keyval": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
+      "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -14352,6 +14370,22 @@
         "react": ">=16.13.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.53.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.2.tgz",
+      "integrity": "sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

From ed2bb21c77458abba55358d36dec95aa050b94b3 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Thu, 21 Nov 2024 16:02:05 +0100
Subject: [PATCH 03/24] bundle the service worker

---
 apps/postgres-new/package.json    |   2 +
 apps/postgres-new/sw.ts           |   2 +-
 apps/postgres-new/tsconfig.json   |   9 +-
 apps/postgres-new/vite.config.mts |  15 +
 package-lock.json                 | 503 +++++++++++++++++++++++++++++-
 5 files changed, 525 insertions(+), 6 deletions(-)
 create mode 100644 apps/postgres-new/vite.config.mts

diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json
index 19a1514b..3e6ad918 100644
--- a/apps/postgres-new/package.json
+++ b/apps/postgres-new/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "build:sw": "vite build",
     "start": "next start",
     "lint": "next lint",
     "check-types": "tsc --noEmit",
@@ -95,6 +96,7 @@
     "tailwindcss": "^3.4.6",
     "tailwindcss-radix": "^3.0.3",
     "typescript": "^5.5.2",
+    "vite": "^5.4.11",
     "webpack": "^5.95.0"
   }
 }
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index 1dc70de7..13281be5 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -2,7 +2,7 @@ import { createOpenAI } from '@ai-sdk/openai'
 import * as kv from 'idb-keyval'
 import { convertToCoreMessages, streamText, ToolInvocation } from 'ai'
 import { codeBlock } from 'common-tags'
-import { convertToCoreTools, maxMessageContext, maxRowLimit, tools } from '~/lib/tools'
+import { convertToCoreTools, maxMessageContext, maxRowLimit, tools } from './lib/tools'
 
 type Message = {
   role: 'user' | 'assistant'
diff --git a/apps/postgres-new/tsconfig.json b/apps/postgres-new/tsconfig.json
index 5cb519b6..99cd20a6 100644
--- a/apps/postgres-new/tsconfig.json
+++ b/apps/postgres-new/tsconfig.json
@@ -21,6 +21,13 @@
       "~/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "global.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "global.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "vite.config.mts"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/apps/postgres-new/vite.config.mts b/apps/postgres-new/vite.config.mts
new file mode 100644
index 00000000..ae4d1d9e
--- /dev/null
+++ b/apps/postgres-new/vite.config.mts
@@ -0,0 +1,15 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'sw.ts'),
+      fileName: 'sw',
+      formats: ['es'],
+    },
+    outDir: resolve(__dirname, 'public'),
+    emptyOutDir: false,
+    copyPublicDir: false,
+  },
+})
diff --git a/package-lock.json b/package-lock.json
index 96a04f44..ebcd991d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -195,6 +195,7 @@
         "tailwindcss": "^3.4.6",
         "tailwindcss-radix": "^3.0.3",
         "typescript": "^5.5.2",
+        "vite": "^5.4.11",
         "webpack": "^5.95.0"
       }
     },
@@ -13756,7 +13757,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.39",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "funding": [
         {
           "type": "opencollective",
@@ -13774,8 +13777,8 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -15472,7 +15475,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -17334,6 +17339,496 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vite": {
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
+      "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.33",
       "license": "MIT",

From 0cd6ed75e7e3069ae1187bab06a9a13fda4056f8 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Thu, 21 Nov 2024 16:02:42 +0100
Subject: [PATCH 04/24] ignore sw build

---
 apps/postgres-new/.gitignore | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 apps/postgres-new/.gitignore

diff --git a/apps/postgres-new/.gitignore b/apps/postgres-new/.gitignore
new file mode 100644
index 00000000..33a7894a
--- /dev/null
+++ b/apps/postgres-new/.gitignore
@@ -0,0 +1 @@
+public/sw.mjs
\ No newline at end of file

From 3ca33c7497460c236c9a9c25783f7dd583735995 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Thu, 21 Nov 2024 17:54:39 +0100
Subject: [PATCH 05/24] it works

---
 apps/postgres-new/components/providers.tsx |  14 ++-
 apps/postgres-new/sw.ts                    | 120 +++++++++++----------
 2 files changed, 75 insertions(+), 59 deletions(-)

diff --git a/apps/postgres-new/components/providers.tsx b/apps/postgres-new/components/providers.tsx
index ace9377d..2f7e7ec4 100644
--- a/apps/postgres-new/components/providers.tsx
+++ b/apps/postgres-new/components/providers.tsx
@@ -2,14 +2,26 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, useEffect } from 'react'
 import AppProvider from './app-provider'
 import { LockProvider } from './lock-provider'
 import { ThemeProvider } from './theme-provider'
 
 const queryClient = new QueryClient()
 
+async function registerServiceWorker() {
+  await navigator.serviceWorker.register('/sw.mjs').catch((error) => {
+    console.error('Failed to register service worker', error)
+  })
+}
+
 export default function Providers({ children }: PropsWithChildren) {
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      registerServiceWorker()
+    }
+  }, [])
+
   return (
     <ThemeProvider attribute="class" defaultTheme="system" disableTransitionOnChange>
       <QueryClientProvider client={queryClient}>
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index 13281be5..b3eb703a 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -9,25 +9,23 @@ type Message = {
   content: string
   toolInvocations?: (ToolInvocation & { result: any })[]
 }
-
-const chatModel = process.env.OPENAI_MODEL ?? 'gpt-4o-2024-08-06'
-
-// Configure OpenAI client with custom base URL
-const openai = createOpenAI({
-  apiKey: process.env.OPENAI_API_KEY,
-  baseURL: process.env.OPENAI_API_BASE ?? 'https://api.openai.com/v1',
-  compatibility: 'strict',
-})
-
 export type {}
 declare const self: ServiceWorkerGlobalScope
 
-self.addEventListener('fetch', async (event) => {
-  const hasLocalModel = await kv.get('model')
+async function handleRequest(event: FetchEvent) {
+  const externalModel = (await kv.get('model')) as
+    | { apiKey?: string; model: string; baseUrl: string }
+    | undefined
   const url = new URL(event.request.url)
   const isChatRoute = url.pathname === '/api/chat' && event.request.method === 'POST'
 
-  if (hasLocalModel && isChatRoute) {
+  if (externalModel && isChatRoute) {
+    const adapter = createOpenAI({
+      baseURL: externalModel.baseUrl,
+      apiKey: externalModel.apiKey,
+    })
+    const model = adapter(externalModel.model)
+
     const { messages }: { messages: Message[] } = await event.request.json()
 
     // Trim the message context sent to the LLM to mitigate token abuse
@@ -38,54 +36,60 @@ self.addEventListener('fetch', async (event) => {
 
     const result = await streamText({
       system: codeBlock`
-      You are a helpful database assistant. Under the hood you have access to an in-browser Postgres database called PGlite (https://github.com/electric-sql/pglite).
-      Some special notes about this database:
-      - foreign data wrappers are not supported
-      - the following extensions are available:
-        - plpgsql [pre-enabled]
-        - vector (https://github.com/pgvector/pgvector) [pre-enabled]
-          - use <=> for cosine distance (default to this)
-          - use <#> for negative inner product
-          - use <-> for L2 distance
-          - use <+> for L1 distance
-          - note queried vectors will be truncated/redacted due to their size - export as CSV if the full vector is required
-
-      When generating tables, do the following:
-      - For primary keys, always use "id bigint primary key generated always as identity" (not serial)
-      - Prefer 'text' over 'varchar'
-      - Keep explanations brief but helpful
-      - Don't repeat yourself after creating the table
-
-      When creating sample data:
-      - Make the data realistic, including joined data
-      - Check for existing records/conflicts in the table
-
-      When querying data, limit to 5 by default. The maximum number of rows you're allowed to fetch is ${maxRowLimit} (to protect AI from token abuse).
-      If the user needs to fetch more than ${maxRowLimit} rows at once, they can export the query as a CSV.
-
-      When performing FTS, always use 'simple' (languages aren't available).
-
-      When importing CSVs try to solve the problem yourself (eg. use a generic text column, then refine)
-      vs. asking the user to change the CSV. No need to select rows after importing.
-
-      You also know math. All math equations and expressions must be written in KaTex and must be wrapped in double dollar \`$$\`:
-        - Inline: $$\\sqrt{26}$$
-        - Multiline:
-            $$
-            \\sqrt{26}
-            $$
-
-      No images are allowed. Do not try to generate or link images, including base64 data URLs.
-
-      Feel free to suggest corrections for suspected typos.
-    `,
-      model: openai(chatModel),
+    You are a helpful database assistant. Under the hood you have access to an in-browser Postgres database called PGlite (https://github.com/electric-sql/pglite).
+    Some special notes about this database:
+    - foreign data wrappers are not supported
+    - the following extensions are available:
+      - plpgsql [pre-enabled]
+      - vector (https://github.com/pgvector/pgvector) [pre-enabled]
+        - use <=> for cosine distance (default to this)
+        - use <#> for negative inner product
+        - use <-> for L2 distance
+        - use <+> for L1 distance
+        - note queried vectors will be truncated/redacted due to their size - export as CSV if the full vector is required
+
+    When generating tables, do the following:
+    - For primary keys, always use "id bigint primary key generated always as identity" (not serial)
+    - Prefer 'text' over 'varchar'
+    - Keep explanations brief but helpful
+    - Don't repeat yourself after creating the table
+
+    When creating sample data:
+    - Make the data realistic, including joined data
+    - Check for existing records/conflicts in the table
+
+    When querying data, limit to 5 by default. The maximum number of rows you're allowed to fetch is ${maxRowLimit} (to protect AI from token abuse).
+    If the user needs to fetch more than ${maxRowLimit} rows at once, they can export the query as a CSV.
+
+    When performing FTS, always use 'simple' (languages aren't available).
+
+    When importing CSVs try to solve the problem yourself (eg. use a generic text column, then refine)
+    vs. asking the user to change the CSV. No need to select rows after importing.
+
+    You also know math. All math equations and expressions must be written in KaTex and must be wrapped in double dollar \`$$\`:
+      - Inline: $$\\sqrt{26}$$
+      - Multiline:
+          $$
+          \\sqrt{26}
+          $$
+
+    No images are allowed. Do not try to generate or link images, including base64 data URLs.
+
+    Feel free to suggest corrections for suspected typos.
+  `,
+      model,
       messages: coreMessages,
       tools: coreTools,
+      onFinish: (event) => {
+        console.log('Hello from service worker', event)
+      },
     })
-
-    return event.respondWith(result.toAIStreamResponse())
+    return result.toAIStreamResponse()
   }
 
-  event.respondWith(fetch(event.request))
+  return fetch(event.request)
+}
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(handleRequest(event))
 })

From c8101b9ac5995f3b9acfc6a33fbe719df7fa34d6 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Fri, 22 Nov 2024 10:41:20 +0100
Subject: [PATCH 06/24] put model provider in context

---
 apps/postgres-new/components/app-provider.tsx |  5 ++
 apps/postgres-new/components/layout.tsx       |  2 +-
 .../components/model/set-model-dialog.tsx     | 12 ++--
 .../components/model/use-model-provider.ts    | 36 +++++++++++
 .../set-external-model-provider-button.tsx    | 51 +++++++++++++++
 .../components/{ => sidebar}/sidebar.tsx      | 62 +++++--------------
 apps/postgres-new/sw.ts                       |  7 +--
 7 files changed, 116 insertions(+), 59 deletions(-)
 create mode 100644 apps/postgres-new/components/model/use-model-provider.ts
 create mode 100644 apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
 rename apps/postgres-new/components/{ => sidebar}/sidebar.tsx (92%)

diff --git a/apps/postgres-new/components/app-provider.tsx b/apps/postgres-new/components/app-provider.tsx
index b4905ced..fbaeb58a 100644
--- a/apps/postgres-new/components/app-provider.tsx
+++ b/apps/postgres-new/components/app-provider.tsx
@@ -32,6 +32,7 @@ import {
 import { legacyDomainHostname } from '~/lib/util'
 import { parse, serialize } from '~/lib/websocket-protocol'
 import { createClient } from '~/utils/supabase/client'
+import { useModelProvider } from './model/use-model-provider'
 
 export type AppProps = PropsWithChildren
 
@@ -263,12 +264,15 @@ export default function AppProvider({ children }: AppProps) {
     setIsRenameDialogOpen(isLegacyDomain || isLegacyDomainRedirect)
   }, [])
 
+  const modelProvider = useModelProvider()
+
   return (
     <AppContext.Provider
       value={{
         user,
         isLoadingUser,
         liveShare,
+        modelProvider,
         signIn,
         signOut,
         isSignInDialogOpen,
@@ -316,6 +320,7 @@ export type AppContextValues = {
     clientIp: string | null
     isLiveSharing: boolean
   }
+  modelProvider: ReturnType<typeof useModelProvider>
   isLegacyDomain: boolean
   isLegacyDomainRedirect: boolean
 }
diff --git a/apps/postgres-new/components/layout.tsx b/apps/postgres-new/components/layout.tsx
index 2a61702f..ae9bef12 100644
--- a/apps/postgres-new/components/layout.tsx
+++ b/apps/postgres-new/components/layout.tsx
@@ -19,7 +19,7 @@ import {
 } from '~/lib/util'
 import { useApp } from './app-provider'
 import { LiveShareIcon } from './live-share-icon'
-import Sidebar from './sidebar'
+import Sidebar from './sidebar/sidebar'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'
 
diff --git a/apps/postgres-new/components/model/set-model-dialog.tsx b/apps/postgres-new/components/model/set-model-dialog.tsx
index 55a86909..38ac2b91 100644
--- a/apps/postgres-new/components/model/set-model-dialog.tsx
+++ b/apps/postgres-new/components/model/set-model-dialog.tsx
@@ -1,7 +1,5 @@
 'use client'
 
-import * as kv from 'idb-keyval'
-import { useState } from 'react'
 import {
   Dialog,
   DialogContent,
@@ -17,6 +15,7 @@ import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
 import { Brain } from 'lucide-react'
+import { useApp } from '../app-provider'
 
 const formSchema = z.object({
   apiKey: z.string().min(1).optional(),
@@ -27,16 +26,15 @@ const formSchema = z.object({
 type FormSchema = z.infer<typeof formSchema>
 
 function SetModelForm(props: { id: string; onSubmit: (values: FormSchema) => void }) {
+  const { modelProvider } = useApp()
+
   const form = useForm<FormSchema>({
     resolver: zodResolver(formSchema),
-    defaultValues: async () => {
-      const model = await kv.get('model')
-      return model
-    },
+    defaultValues: modelProvider.state,
   })
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    await kv.set('model', values)
+    await modelProvider.set(values)
     props.onSubmit(values)
   }
 
diff --git a/apps/postgres-new/components/model/use-model-provider.ts b/apps/postgres-new/components/model/use-model-provider.ts
new file mode 100644
index 00000000..7bd85e05
--- /dev/null
+++ b/apps/postgres-new/components/model/use-model-provider.ts
@@ -0,0 +1,36 @@
+import { useEffect, useState, useCallback } from 'react'
+import * as kv from 'idb-keyval'
+
+export type ModelProvider = {
+  apiKey?: string
+  model: string
+  baseUrl: string
+}
+
+export function useModelProvider() {
+  const [modelProvider, setModelProvider] = useState<ModelProvider | undefined>()
+
+  const set = useCallback(async (modelProvider: ModelProvider) => {
+    await kv.set('modelProvider', modelProvider)
+    setModelProvider(modelProvider)
+  }, [])
+
+  const remove = useCallback(async () => {
+    await kv.del('modelProvider')
+    setModelProvider(undefined)
+  }, [])
+
+  useEffect(() => {
+    async function init() {
+      const modelProvider = await kv.get('modelProvider')
+      setModelProvider(modelProvider)
+    }
+    init()
+  }, [setModelProvider])
+
+  return {
+    state: modelProvider,
+    set,
+    delete: remove,
+  }
+}
diff --git a/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
new file mode 100644
index 00000000..15f3e43e
--- /dev/null
+++ b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
@@ -0,0 +1,51 @@
+import { m } from 'framer-motion'
+import { Button } from '../ui/button'
+import { Brain } from 'lucide-react'
+import { useApp } from '../app-provider'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
+import { SetModelDialog } from '../model/set-model-dialog'
+import { useState } from 'react'
+
+type SetExternalModelProviderButtonProps = {
+  collapsed?: boolean
+}
+
+export function SetExternalModelProviderButton(props: SetExternalModelProviderButtonProps) {
+  const { modelProvider } = useApp()
+  const [isSetModelDialogOpen, setIsSetModelDialogOpen] = useState(false)
+
+  const modelName = modelProvider.state?.model.split('/').at(-1)
+  const text = modelName ?? 'Set external model'
+  const button = props.collapsed ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <m.div layout="position" layoutId="set-external-model-button">
+          <Button size={'icon'} variant="outline" onClick={() => setIsSetModelDialogOpen(true)}>
+            <Brain size={16} strokeWidth={2} />
+          </Button>
+        </m.div>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        <p>{text}</p>
+      </TooltipContent>
+    </Tooltip>
+  ) : (
+    <m.div layout="position" layoutId="set-external-model-button">
+      <Button
+        className="w-full gap-2"
+        variant="outline"
+        onClick={() => setIsSetModelDialogOpen(true)}
+      >
+        <Brain size={18} strokeWidth={2} />
+        <div className="inline-block whitespace-nowrap overflow-hidden text-ellipsis">{text}</div>
+      </Button>
+    </m.div>
+  )
+
+  return (
+    <>
+      <SetModelDialog open={isSetModelDialogOpen} onOpenChange={setIsSetModelDialogOpen} />
+      {button}
+    </>
+  )
+}
diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar/sidebar.tsx
similarity index 92%
rename from apps/postgres-new/components/sidebar.tsx
rename to apps/postgres-new/components/sidebar/sidebar.tsx
index b6c41ea7..d42e1bc1 100644
--- a/apps/postgres-new/components/sidebar.tsx
+++ b/apps/postgres-new/components/sidebar/sidebar.tsx
@@ -5,7 +5,6 @@ import { AnimatePresence, m } from 'framer-motion'
 import {
   ArrowLeftToLine,
   ArrowRightToLine,
-  Brain,
   Database as DbIcon,
   Download,
   Loader,
@@ -34,17 +33,17 @@ import { MergedDatabase, useMergedDatabases } from '~/data/merged-databases/merg
 import { useQueryEvent } from '~/lib/hooks'
 import { downloadFile, getDeployUrl, getOauthUrl, titleToKebabCase } from '~/lib/util'
 import { cn } from '~/lib/utils'
-import { useApp } from './app-provider'
-import { DeployDialog } from './deploy/deploy-dialog'
-import { SupabaseDeploymentInfo } from './deploy/deploy-info'
-import { DeployInfoDialog } from './deploy/deploy-info-dialog'
-import { IntegrationDialog } from './deploy/integration-dialog'
-import { RedeployDialog } from './deploy/redeploy-dialog'
-import { LiveShareIcon } from './live-share-icon'
-import { useIsLocked } from './lock-provider'
-import SignInButton from './sign-in-button'
-import { SupabaseIcon } from './supabase-icon'
-import ThemeDropdown from './theme-dropdown'
+import { useApp } from '../app-provider'
+import { DeployDialog } from '../deploy/deploy-dialog'
+import { SupabaseDeploymentInfo } from '../deploy/deploy-info'
+import { DeployInfoDialog } from '../deploy/deploy-info-dialog'
+import { IntegrationDialog } from '../deploy/integration-dialog'
+import { RedeployDialog } from '../deploy/redeploy-dialog'
+import { LiveShareIcon } from '../live-share-icon'
+import { useIsLocked } from '../lock-provider'
+import SignInButton from '../sign-in-button'
+import { SupabaseIcon } from '../supabase-icon'
+import ThemeDropdown from '../theme-dropdown'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -55,8 +54,8 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from './ui/dropdown-menu'
-import { SetModelDialog } from './model/set-model-dialog'
+} from '../ui/dropdown-menu'
+import { SetExternalModelProviderButton } from './set-external-model-provider-button'
 
 export default function Sidebar() {
   const {
@@ -72,8 +71,6 @@ export default function Sidebar() {
   let { id: currentDatabaseId } = useParams<{ id: string }>()
   const router = useRouter()
   const [showSidebar, setShowSidebar] = useState(true)
-  const [isSetModelDialogOpen, setIsSetModelDialogOpen] = useState(false)
-
   const { data: databases, isLoading: isLoadingDatabases } = useMergedDatabases()
 
   return (
@@ -109,7 +106,6 @@ export default function Sidebar() {
           </div>
         </DialogContent>
       </Dialog>
-      <SetModelDialog open={isSetModelDialogOpen} onOpenChange={setIsSetModelDialogOpen} />
       <AnimatePresence initial={false} mode="popLayout">
         {showSidebar && (
           <m.div
@@ -206,18 +202,7 @@ export default function Sidebar() {
                 )}
               </div>
             )}
-            <m.div layout="position" layoutId="set-external-model-button">
-              <Button
-                className="w-full gap-2"
-                variant="outline"
-                onClick={() => {
-                  setIsSetModelDialogOpen(true)
-                }}
-              >
-                <Brain size={18} strokeWidth={2} />
-                Set external model
-              </Button>
-            </m.div>
+            <SetExternalModelProviderButton />
             <m.div layout="position" layoutId="theme-dropdown">
               <ThemeDropdown className="w-full" />
             </m.div>
@@ -283,24 +268,7 @@ export default function Sidebar() {
             </Tooltip>
           </div>
           <div className="flex flex-col gap-2">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <m.div layout="position" layoutId="set-external-model-button">
-                  <Button
-                    size={'icon'}
-                    variant="outline"
-                    onClick={() => {
-                      setIsSetModelDialogOpen(true)
-                    }}
-                  >
-                    <Brain size={16} strokeWidth={2} />
-                  </Button>
-                </m.div>
-              </TooltipTrigger>
-              <TooltipContent side="right">
-                <p>Set external model</p>
-              </TooltipContent>
-            </Tooltip>
+            <SetExternalModelProviderButton collapsed={true} />
             <Tooltip>
               <TooltipTrigger asChild>
                 <m.div layout="position" layoutId="theme-dropdown">
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index b3eb703a..304425a8 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -3,19 +3,18 @@ import * as kv from 'idb-keyval'
 import { convertToCoreMessages, streamText, ToolInvocation } from 'ai'
 import { codeBlock } from 'common-tags'
 import { convertToCoreTools, maxMessageContext, maxRowLimit, tools } from './lib/tools'
+import type { ModelProvider } from './components/model/use-model-provider'
 
 type Message = {
   role: 'user' | 'assistant'
   content: string
   toolInvocations?: (ToolInvocation & { result: any })[]
 }
-export type {}
+
 declare const self: ServiceWorkerGlobalScope
 
 async function handleRequest(event: FetchEvent) {
-  const externalModel = (await kv.get('model')) as
-    | { apiKey?: string; model: string; baseUrl: string }
-    | undefined
+  const externalModel = (await kv.get('modelProvider')) as ModelProvider | undefined
   const url = new URL(event.request.url)
   const isChatRoute = url.pathname === '/api/chat' && event.request.method === 'POST'
 

From fb386c6bbb803a803873216d5192449ec4559a0c Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Fri, 22 Nov 2024 11:05:33 +0100
Subject: [PATCH 07/24] renaming

---
 apps/postgres-new/components/app-provider.tsx |  2 +-
 .../set-model-provider-dialog.tsx}            | 18 +++---
 .../use-model-provider.ts                     |  0
 .../set-external-model-provider-button.tsx    | 17 ++++--
 apps/postgres-new/components/ui/switch.tsx    | 29 +++++++++
 apps/postgres-new/package.json                |  1 +
 apps/postgres-new/sw.ts                       |  2 +-
 package-lock.json                             | 60 +++++++++++++++++++
 8 files changed, 113 insertions(+), 16 deletions(-)
 rename apps/postgres-new/components/{model/set-model-dialog.tsx => model-provider/set-model-provider-dialog.tsx} (84%)
 rename apps/postgres-new/components/{model => model-provider}/use-model-provider.ts (100%)
 create mode 100644 apps/postgres-new/components/ui/switch.tsx

diff --git a/apps/postgres-new/components/app-provider.tsx b/apps/postgres-new/components/app-provider.tsx
index fbaeb58a..1198d746 100644
--- a/apps/postgres-new/components/app-provider.tsx
+++ b/apps/postgres-new/components/app-provider.tsx
@@ -32,7 +32,7 @@ import {
 import { legacyDomainHostname } from '~/lib/util'
 import { parse, serialize } from '~/lib/websocket-protocol'
 import { createClient } from '~/utils/supabase/client'
-import { useModelProvider } from './model/use-model-provider'
+import { useModelProvider } from './model-provider/use-model-provider'
 
 export type AppProps = PropsWithChildren
 
diff --git a/apps/postgres-new/components/model/set-model-dialog.tsx b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
similarity index 84%
rename from apps/postgres-new/components/model/set-model-dialog.tsx
rename to apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
index 38ac2b91..a3bec0fe 100644
--- a/apps/postgres-new/components/model/set-model-dialog.tsx
+++ b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
@@ -25,7 +25,7 @@ const formSchema = z.object({
 
 type FormSchema = z.infer<typeof formSchema>
 
-function SetModelForm(props: { id: string; onSubmit: (values: FormSchema) => void }) {
+function SetModelProviderForm(props: { id: string; onSubmit: (values: FormSchema) => void }) {
   const { modelProvider } = useApp()
 
   const form = useForm<FormSchema>({
@@ -85,28 +85,28 @@ function SetModelForm(props: { id: string; onSubmit: (values: FormSchema) => voi
   )
 }
 
-export type SetModelDialogProps = {
+export type SetModelProviderDialogProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
   onConfirm?: () => void
 }
 
-export function SetModelDialog(props: SetModelDialogProps) {
+export function SetModelProviderDialog(props: SetModelProviderDialogProps) {
   return (
     <Dialog open={props.open} onOpenChange={props.onOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle className="flex gap-2 items-center mb-4">
-            <Brain /> Set an external model
+            <Brain /> Set an external model provider
           </DialogTitle>
           <DialogDescription className="flex flex-col gap-4">
-            You can set your own external model compatible with the OpenAI API. Your model
-            informations will be saved in your browser.
+            You can set your own external model provider compatible with the OpenAI API. Your model
+            provider informations will be saved in your browser.
           </DialogDescription>
         </DialogHeader>
         <div className="my-1 border-b" />
-        <SetModelForm
-          id="set-model-form"
+        <SetModelProviderForm
+          id="set-model-provider-form"
           onSubmit={() => {
             props.onOpenChange(false)
           }}
@@ -120,7 +120,7 @@ export function SetModelDialog(props: SetModelDialogProps) {
           >
             Cancel
           </Button>
-          <Button form="set-model-form">Save</Button>
+          <Button form="set-model-provider-form">Save</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/apps/postgres-new/components/model/use-model-provider.ts b/apps/postgres-new/components/model-provider/use-model-provider.ts
similarity index 100%
rename from apps/postgres-new/components/model/use-model-provider.ts
rename to apps/postgres-new/components/model-provider/use-model-provider.ts
diff --git a/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
index 15f3e43e..4f26fb88 100644
--- a/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
+++ b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
@@ -3,7 +3,7 @@ import { Button } from '../ui/button'
 import { Brain } from 'lucide-react'
 import { useApp } from '../app-provider'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
-import { SetModelDialog } from '../model/set-model-dialog'
+import { SetModelProviderDialog } from '../model-provider/set-model-provider-dialog'
 import { useState } from 'react'
 
 type SetExternalModelProviderButtonProps = {
@@ -12,7 +12,7 @@ type SetExternalModelProviderButtonProps = {
 
 export function SetExternalModelProviderButton(props: SetExternalModelProviderButtonProps) {
   const { modelProvider } = useApp()
-  const [isSetModelDialogOpen, setIsSetModelDialogOpen] = useState(false)
+  const [isSetModelProviderDialogOpen, setIsSetModelProviderDialogOpen] = useState(false)
 
   const modelName = modelProvider.state?.model.split('/').at(-1)
   const text = modelName ?? 'Set external model'
@@ -20,7 +20,11 @@ export function SetExternalModelProviderButton(props: SetExternalModelProviderBu
     <Tooltip>
       <TooltipTrigger asChild>
         <m.div layout="position" layoutId="set-external-model-button">
-          <Button size={'icon'} variant="outline" onClick={() => setIsSetModelDialogOpen(true)}>
+          <Button
+            size={'icon'}
+            variant="outline"
+            onClick={() => setIsSetModelProviderDialogOpen(true)}
+          >
             <Brain size={16} strokeWidth={2} />
           </Button>
         </m.div>
@@ -34,7 +38,7 @@ export function SetExternalModelProviderButton(props: SetExternalModelProviderBu
       <Button
         className="w-full gap-2"
         variant="outline"
-        onClick={() => setIsSetModelDialogOpen(true)}
+        onClick={() => setIsSetModelProviderDialogOpen(true)}
       >
         <Brain size={18} strokeWidth={2} />
         <div className="inline-block whitespace-nowrap overflow-hidden text-ellipsis">{text}</div>
@@ -44,7 +48,10 @@ export function SetExternalModelProviderButton(props: SetExternalModelProviderBu
 
   return (
     <>
-      <SetModelDialog open={isSetModelDialogOpen} onOpenChange={setIsSetModelDialogOpen} />
+      <SetModelProviderDialog
+        open={isSetModelProviderDialogOpen}
+        onOpenChange={setIsSetModelProviderDialogOpen}
+      />
       {button}
     </>
   )
diff --git a/apps/postgres-new/components/ui/switch.tsx b/apps/postgres-new/components/ui/switch.tsx
new file mode 100644
index 00000000..f53c755e
--- /dev/null
+++ b/apps/postgres-new/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "~/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json
index 3e6ad918..6f98ecc7 100644
--- a/apps/postgres-new/package.json
+++ b/apps/postgres-new/package.json
@@ -27,6 +27,7 @@
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@std/tar": "npm:@jsr/std__tar@^0.1.2",
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index 304425a8..2e3cfad5 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -3,7 +3,7 @@ import * as kv from 'idb-keyval'
 import { convertToCoreMessages, streamText, ToolInvocation } from 'ai'
 import { codeBlock } from 'common-tags'
 import { convertToCoreTools, maxMessageContext, maxRowLimit, tools } from './lib/tools'
-import type { ModelProvider } from './components/model/use-model-provider'
+import type { ModelProvider } from './components/model-provider/use-model-provider'
 
 type Message = {
   role: 'user' | 'assistant'
diff --git a/package-lock.json b/package-lock.json
index ebcd991d..ceb4413b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -126,6 +126,7 @@
         "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-progress": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.1",
         "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@std/tar": "npm:@jsr/std__tar@^0.1.2",
@@ -3525,6 +3526,50 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.1.tgz",
+      "integrity": "sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.1.0",
       "license": "MIT",
@@ -3651,6 +3696,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",

From 5fbc2d5d0251df0ac7793172bb3b6f0a54868a59 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Fri, 22 Nov 2024 11:30:10 +0100
Subject: [PATCH 08/24] enable provider

---
 apps/postgres-new/components/chat.tsx         | 23 +++++++++++++------
 .../set-model-provider-dialog.tsx             | 17 ++++++++++++++
 .../model-provider/use-model-provider.ts      |  1 +
 apps/postgres-new/sw.ts                       | 10 ++++----
 4 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx
index 71747ada..a6d80ace 100644
--- a/apps/postgres-new/components/chat.tsx
+++ b/apps/postgres-new/components/chat.tsx
@@ -51,8 +51,15 @@ export function getInitialMessages(tables: TablesData): Message[] {
 }
 
 export default function Chat() {
-  const { user, isLoadingUser, focusRef, setIsSignInDialogOpen, isRateLimited, liveShare } =
-    useApp()
+  const {
+    user,
+    isLoadingUser,
+    focusRef,
+    setIsSignInDialogOpen,
+    isRateLimited,
+    liveShare,
+    modelProvider,
+  } = useApp()
   const [inputFocusState, setInputFocusState] = useState(false)
 
   const {
@@ -155,7 +162,7 @@ export default function Chat() {
     cursor: dropZoneCursor,
   } = useDropZone({
     async onDrop(files) {
-      if (!user) {
+      if (isAuthRequired) {
         return
       }
 
@@ -223,8 +230,10 @@ export default function Chat() {
 
   const [isMessageAnimationComplete, setIsMessageAnimationComplete] = useState(false)
 
+  const isAuthRequired = user === undefined && modelProvider.state?.enabled !== true
+
   const isChatEnabled =
-    !isLoadingMessages && !isLoadingSchema && user !== undefined && !liveShare.isLiveSharing
+    !isLoadingMessages && !isLoadingSchema && !isAuthRequired && !liveShare.isLiveSharing
 
   const isSubmitEnabled = isChatEnabled && Boolean(input.trim())
 
@@ -357,7 +366,7 @@ export default function Chat() {
           </div>
         ) : (
           <div className="h-full w-full max-w-4xl flex flex-col gap-10 justify-center items-center">
-            {user ? (
+            {!isAuthRequired ? (
               <>
                 <LiveShareOverlay databaseId={databaseId} />
                 <m.h3
@@ -427,7 +436,7 @@ export default function Chat() {
       </div>
       <div className="flex flex-col items-center gap-3 pb-1 relative">
         <AnimatePresence>
-          {!user && !isLoadingUser && isConversationStarted && (
+          {isAuthRequired && !isLoadingUser && isConversationStarted && (
             <m.div
               className="flex flex-col items-center gap-4 max-w-lg my-4"
               variants={{
@@ -487,7 +496,7 @@ export default function Chat() {
             onClick={async (e) => {
               e.preventDefault()
 
-              if (!user) {
+              if (isAuthRequired) {
                 return
               }
 
diff --git a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
index a3bec0fe..a42e2e22 100644
--- a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
+++ b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
@@ -16,11 +16,13 @@ import { useForm } from 'react-hook-form'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
 import { Brain } from 'lucide-react'
 import { useApp } from '../app-provider'
+import { Switch } from '../ui/switch'
 
 const formSchema = z.object({
   apiKey: z.string().min(1).optional(),
   baseUrl: z.string().min(1),
   model: z.string().min(1),
+  enabled: z.boolean().default(true),
 })
 
 type FormSchema = z.infer<typeof formSchema>
@@ -41,6 +43,21 @@ function SetModelProviderForm(props: { id: string; onSubmit: (values: FormSchema
   return (
     <Form {...form}>
       <form id={props.id} onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="enabled"
+          render={({ field }) => (
+            <FormItem>
+              <div className="flex items-center gap-2">
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+                <FormLabel className="cursor-pointer">Enable</FormLabel>
+              </div>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
         <FormField
           control={form.control}
           name="baseUrl"
diff --git a/apps/postgres-new/components/model-provider/use-model-provider.ts b/apps/postgres-new/components/model-provider/use-model-provider.ts
index 7bd85e05..4a147484 100644
--- a/apps/postgres-new/components/model-provider/use-model-provider.ts
+++ b/apps/postgres-new/components/model-provider/use-model-provider.ts
@@ -5,6 +5,7 @@ export type ModelProvider = {
   apiKey?: string
   model: string
   baseUrl: string
+  enabled: boolean
 }
 
 export function useModelProvider() {
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index 2e3cfad5..c6a5b041 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -14,16 +14,16 @@ type Message = {
 declare const self: ServiceWorkerGlobalScope
 
 async function handleRequest(event: FetchEvent) {
-  const externalModel = (await kv.get('modelProvider')) as ModelProvider | undefined
   const url = new URL(event.request.url)
   const isChatRoute = url.pathname === '/api/chat' && event.request.method === 'POST'
+  const modelProvider = (await kv.get('modelProvider')) as ModelProvider | undefined
 
-  if (externalModel && isChatRoute) {
+  if (isChatRoute && modelProvider?.enabled) {
     const adapter = createOpenAI({
-      baseURL: externalModel.baseUrl,
-      apiKey: externalModel.apiKey,
+      baseURL: modelProvider.baseUrl,
+      apiKey: modelProvider.apiKey,
     })
-    const model = adapter(externalModel.model)
+    const model = adapter(modelProvider.model)
 
     const { messages }: { messages: Message[] } = await event.request.json()
 

From f2b8b2b01e7c7890b68c05476bf4075e30189fcf Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Fri, 22 Nov 2024 11:35:59 +0100
Subject: [PATCH 09/24] build the sw before build next

---
 apps/postgres-new/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json
index 6f98ecc7..a1efd343 100644
--- a/apps/postgres-new/package.json
+++ b/apps/postgres-new/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "npm run build:sw && next build",
     "build:sw": "vite build",
     "start": "next start",
     "lint": "next lint",

From 39b91fdb90a9f6498df19340c2a38a8b14116637 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Fri, 22 Nov 2024 12:23:27 +0100
Subject: [PATCH 10/24] upgrade sdk

---
 apps/postgres-new/app/api/chat/route.ts       |   2 +-
 .../components/sidebar/sidebar.tsx            |   6 +-
 apps/postgres-new/components/workspace.tsx    |   1 -
 apps/postgres-new/package.json                |   4 +-
 apps/postgres-new/sw.ts                       |  10 +-
 package-lock.json                             | 633 ++----------------
 6 files changed, 79 insertions(+), 577 deletions(-)

diff --git a/apps/postgres-new/app/api/chat/route.ts b/apps/postgres-new/app/api/chat/route.ts
index 4a7a0b62..11d84e29 100644
--- a/apps/postgres-new/app/api/chat/route.ts
+++ b/apps/postgres-new/app/api/chat/route.ts
@@ -158,7 +158,7 @@ export async function POST(req: Request) {
     },
   })
 
-  return result.toAIStreamResponse()
+  return result.toDataStreamResponse()
 }
 
 function getEventToolResult(toolResult: ToolResultPart): ChatInferenceEventToolResult | undefined {
diff --git a/apps/postgres-new/components/sidebar/sidebar.tsx b/apps/postgres-new/components/sidebar/sidebar.tsx
index d42e1bc1..4f02ae13 100644
--- a/apps/postgres-new/components/sidebar/sidebar.tsx
+++ b/apps/postgres-new/components/sidebar/sidebar.tsx
@@ -67,11 +67,13 @@ export default function Sidebar() {
     setIsRenameDialogOpen,
     isLegacyDomain,
     liveShare,
+    modelProvider,
   } = useApp()
   let { id: currentDatabaseId } = useParams<{ id: string }>()
   const router = useRouter()
   const [showSidebar, setShowSidebar] = useState(true)
   const { data: databases, isLoading: isLoadingDatabases } = useMergedDatabases()
+  const isAuthRequired = user === undefined && modelProvider.state?.enabled !== true
 
   return (
     <>
@@ -141,7 +143,7 @@ export default function Sidebar() {
               <m.div layout="position" layoutId="new-database-button">
                 <Button
                   onClick={() => {
-                    if (!user) {
+                    if (isAuthRequired) {
                       setIsSignInDialogOpen(true)
                     } else {
                       if (liveShare.isLiveSharing) {
@@ -250,7 +252,7 @@ export default function Sidebar() {
                   <Button
                     size={'icon'}
                     onClick={() => {
-                      if (!user) {
+                      if (isAuthRequired) {
                         setIsSignInDialogOpen(true)
                       } else {
                         router.push('/')
diff --git a/apps/postgres-new/components/workspace.tsx b/apps/postgres-new/components/workspace.tsx
index 8ce6b4bc..ddfff7a7 100644
--- a/apps/postgres-new/components/workspace.tsx
+++ b/apps/postgres-new/components/workspace.tsx
@@ -68,7 +68,6 @@ export default function Workspace({
   const { messages, setMessages, append, stop } = useChat({
     id: databaseId,
     api: '/api/chat',
-    maxToolRoundtrips: 10,
     keepLastMessageOnError: true,
     onToolCall: onToolCall as any, // our `OnToolCall` type is more specific than `ai` SDK's
     body: {
diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json
index a1efd343..6abb6362 100644
--- a/apps/postgres-new/package.json
+++ b/apps/postgres-new/package.json
@@ -12,7 +12,7 @@
     "generate:database-types": "supabase gen types --lang=typescript --local > utils/supabase/db-types.ts"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^0.0.21",
+    "@ai-sdk/openai": "^1.0.4",
     "@dagrejs/dagre": "^1.1.2",
     "@database.build/deploy": "*",
     "@electric-sql/pglite": "^0.2.9",
@@ -38,7 +38,7 @@
     "@upstash/ratelimit": "^2.0.1",
     "@vercel/kv": "^2.0.0",
     "@xenova/transformers": "^2.17.2",
-    "ai": "^3.2.8",
+    "ai": "^4.0.3",
     "async-mutex": "^0.5.0",
     "chart.js": "^4.4.3",
     "chartjs-adapter-date-fns": "^3.0.0",
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index c6a5b041..a36ea2a5 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -16,9 +16,13 @@ declare const self: ServiceWorkerGlobalScope
 async function handleRequest(event: FetchEvent) {
   const url = new URL(event.request.url)
   const isChatRoute = url.pathname === '/api/chat' && event.request.method === 'POST'
-  const modelProvider = (await kv.get('modelProvider')) as ModelProvider | undefined
+  if (isChatRoute) {
+    const modelProvider = (await kv.get('modelProvider')) as ModelProvider | undefined
+
+    if (!modelProvider?.enabled) {
+      return fetch(event.request)
+    }
 
-  if (isChatRoute && modelProvider?.enabled) {
     const adapter = createOpenAI({
       baseURL: modelProvider.baseUrl,
       apiKey: modelProvider.apiKey,
@@ -83,7 +87,7 @@ async function handleRequest(event: FetchEvent) {
         console.log('Hello from service worker', event)
       },
     })
-    return result.toAIStreamResponse()
+    return result.toDataStreamResponse()
   }
 
   return fetch(event.request)
diff --git a/package-lock.json b/package-lock.json
index ceb4413b..586ce8ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -111,7 +111,7 @@
       "name": "@database.build/web",
       "version": "0.0.0",
       "dependencies": {
-        "@ai-sdk/openai": "^0.0.21",
+        "@ai-sdk/openai": "^1.0.4",
         "@dagrejs/dagre": "^1.1.2",
         "@database.build/deploy": "*",
         "@electric-sql/pglite": "^0.2.9",
@@ -137,7 +137,7 @@
         "@upstash/ratelimit": "^2.0.1",
         "@vercel/kv": "^2.0.0",
         "@xenova/transformers": "^2.17.2",
-        "ai": "^3.2.8",
+        "ai": "^4.0.3",
         "async-mutex": "^0.5.0",
         "chart.js": "^4.4.3",
         "chartjs-adapter-date-fns": "^3.0.0",
@@ -238,13 +238,13 @@
       }
     },
     "node_modules/@ai-sdk/openai": {
-      "version": "0.0.21",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-0.0.21.tgz",
-      "integrity": "sha512-k1sLRDKIsiHFuwPa9xBm4oQZ7JQVPE9+KzwP/E4v4zGwsL8Sp5gt+OTccP5cECVhDcRKDYaj0wXtCcmFyAh5uA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-1.0.4.tgz",
+      "integrity": "sha512-3QpgKmkCeJvUdeu3sVRL/ZKWzg8biO0tN2owQW/lFV95o8qskE3bN95R9H136Mmu0124/C28aY6ScxO93nUrtg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@ai-sdk/provider": "0.0.9",
-        "@ai-sdk/provider-utils": "0.0.12"
+        "@ai-sdk/provider": "1.0.1",
+        "@ai-sdk/provider-utils": "2.0.2"
       },
       "engines": {
         "node": ">=18"
@@ -254,27 +254,27 @@
       }
     },
     "node_modules/@ai-sdk/provider": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-0.0.9.tgz",
-      "integrity": "sha512-SJX9J+wiur/EVSYZ6lHV33YWB/yeZ+RCGg+8gSsKzrxEUCh+TkqM5Af7cw2hDFv65dXyeNOZHhfINoD9StEm6A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-1.0.1.tgz",
+      "integrity": "sha512-mV+3iNDkzUsZ0pR2jG0sVzU6xtQY5DtSCBy3JFycLp6PwjyLw/iodfL3MwdmMCRJWgs3dadcHejRnMvF9nGTBg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "json-schema": "0.4.0"
+        "json-schema": "^0.4.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@ai-sdk/provider-utils": {
-      "version": "0.0.12",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-0.0.12.tgz",
-      "integrity": "sha512-jt3RwW68x+fVPrsmcKR3RT+G+ISgsO7mu/M+kCnZmxR4JtbypgS/JsAtnnoD7YtAcqLplbYBzJEsRW4CRqIWMQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.0.2.tgz",
+      "integrity": "sha512-IAvhKhdlXqiSmvx/D4uNlFYCl8dWT+M9K+IuEcSgnE2Aj27GWu8sDIpAf4r4Voc+wOUkOECVKQhFo8g9pozdjA==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@ai-sdk/provider": "0.0.9",
-        "eventsource-parser": "1.1.2",
-        "nanoid": "3.3.6",
-        "secure-json-parse": "2.7.0"
+        "@ai-sdk/provider": "1.0.1",
+        "eventsource-parser": "^3.0.0",
+        "nanoid": "^3.3.7",
+        "secure-json-parse": "^2.7.0"
       },
       "engines": {
         "node": ">=18"
@@ -289,18 +289,21 @@
       }
     },
     "node_modules/@ai-sdk/react": {
-      "version": "0.0.26",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-1.0.2.tgz",
+      "integrity": "sha512-VQfQ6PMiUz4hDquAfjih0DIw4gsQvRFk91SFg2xWirDO4swMZByJzqGGcILPQKbww5ndCo48iZj9S1mLKZo5Dg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@ai-sdk/provider-utils": "1.0.2",
-        "@ai-sdk/ui-utils": "0.0.17",
-        "swr": "2.2.5"
+        "@ai-sdk/provider-utils": "2.0.2",
+        "@ai-sdk/ui-utils": "1.0.2",
+        "swr": "^2.2.5",
+        "throttleit": "2.1.0"
       },
       "engines": {
         "node": ">=18"
       },
       "peerDependencies": {
-        "react": "^18 || ^19",
+        "react": "^18 || ^19 || ^19.0.0-rc",
         "zod": "^3.0.0"
       },
       "peerDependenciesMeta": {
@@ -312,194 +315,15 @@
         }
       }
     },
-    "node_modules/@ai-sdk/react/node_modules/@ai-sdk/provider": {
-      "version": "0.0.12",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "json-schema": "0.4.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@ai-sdk/react/node_modules/@ai-sdk/provider-utils": {
-      "version": "1.0.2",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "0.0.12",
-        "eventsource-parser": "1.1.2",
-        "nanoid": "3.3.6",
-        "secure-json-parse": "2.7.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.0.0"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@ai-sdk/solid": {
-      "version": "0.0.19",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/ui-utils": "0.0.17"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "solid-js": "^1.7.7"
-      },
-      "peerDependenciesMeta": {
-        "solid-js": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@ai-sdk/svelte": {
-      "version": "0.0.20",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider-utils": "1.0.2",
-        "@ai-sdk/ui-utils": "0.0.17",
-        "sswr": "2.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "svelte": "^3.0.0 || ^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "svelte": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@ai-sdk/svelte/node_modules/@ai-sdk/provider": {
-      "version": "0.0.12",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "json-schema": "0.4.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@ai-sdk/svelte/node_modules/@ai-sdk/provider-utils": {
-      "version": "1.0.2",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "0.0.12",
-        "eventsource-parser": "1.1.2",
-        "nanoid": "3.3.6",
-        "secure-json-parse": "2.7.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.0.0"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@ai-sdk/ui-utils": {
-      "version": "0.0.17",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider-utils": "1.0.2",
-        "secure-json-parse": "2.7.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.0.0"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@ai-sdk/ui-utils/node_modules/@ai-sdk/provider": {
-      "version": "0.0.12",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "json-schema": "0.4.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@ai-sdk/ui-utils/node_modules/@ai-sdk/provider-utils": {
       "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-1.0.2.tgz",
+      "integrity": "sha512-hHrUdeThGHu/rsGZBWQ9PjrAU9Htxgbo9MFyR5B/aWoNbBeXn1HLMY1+uMEnXL5pRPlmyVRjgIavWg7UgeNDOw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@ai-sdk/provider": "0.0.12",
-        "eventsource-parser": "1.1.2",
-        "nanoid": "3.3.6",
-        "secure-json-parse": "2.7.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.0.0"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@ai-sdk/vue": {
-      "version": "0.0.21",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider-utils": "0.0.14",
-        "@ai-sdk/ui-utils": "0.0.17",
-        "swrv": "1.0.4"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "vue": "^3.3.4"
-      },
-      "peerDependenciesMeta": {
-        "vue": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@ai-sdk/vue/node_modules/@ai-sdk/provider": {
-      "version": "0.0.10",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "json-schema": "0.4.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@ai-sdk/vue/node_modules/@ai-sdk/provider-utils": {
-      "version": "0.0.14",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "0.0.10",
-        "eventsource-parser": "1.1.2",
-        "nanoid": "3.3.6",
-        "secure-json-parse": "2.7.0"
+        "@ai-sdk/provider": "1.0.1",
+        "@ai-sdk/provider-utils": "2.0.2",
+        "zod-to-json-schema": "^3.23.5"
       },
       "engines": {
         "node": ">=18"
@@ -525,18 +349,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@aws-crypto/crc32": {
       "version": "5.2.0",
       "license": "Apache-2.0",
@@ -1457,17 +1269,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/@babel/parser": {
-      "version": "7.24.8",
-      "license": "MIT",
-      "peer": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.24.8",
       "license": "MIT",
@@ -5643,107 +5444,6 @@
         "node": ">=14.6"
       }
     },
-    "node_modules/@vue/compiler-core": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.24.7",
-        "@vue/shared": "3.4.33",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/compiler-core/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@vue/compiler-dom": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-core": "3.4.33",
-        "@vue/shared": "3.4.33"
-      }
-    },
-    "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.24.7",
-        "@vue/compiler-core": "3.4.33",
-        "@vue/compiler-dom": "3.4.33",
-        "@vue/compiler-ssr": "3.4.33",
-        "@vue/shared": "3.4.33",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.10",
-        "postcss": "^8.4.39",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.4.33",
-        "@vue/shared": "3.4.33"
-      }
-    },
-    "node_modules/@vue/reactivity": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/shared": "3.4.33"
-      }
-    },
-    "node_modules/@vue/runtime-core": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/reactivity": "3.4.33",
-        "@vue/shared": "3.4.33"
-      }
-    },
-    "node_modules/@vue/runtime-dom": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/reactivity": "3.4.33",
-        "@vue/runtime-core": "3.4.33",
-        "@vue/shared": "3.4.33",
-        "csstype": "^3.1.3"
-      }
-    },
-    "node_modules/@vue/server-renderer": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-ssr": "3.4.33",
-        "@vue/shared": "3.4.33"
-      },
-      "peerDependencies": {
-        "vue": "3.4.33"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -5965,6 +5665,7 @@
     },
     "node_modules/acorn": {
       "version": "8.12.1",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -6031,75 +5732,30 @@
       }
     },
     "node_modules/ai": {
-      "version": "3.2.33",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-4.0.3.tgz",
+      "integrity": "sha512-nx5cNMldOQ72hwxL60NLtRnsmQd5Bo887Wznvxt8F5xnmjdeXRpz4ixp+0xGA88X7wiCn6c+xrhGEb9fesi/Tw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@ai-sdk/provider": "0.0.12",
-        "@ai-sdk/provider-utils": "1.0.2",
-        "@ai-sdk/react": "0.0.26",
-        "@ai-sdk/solid": "0.0.19",
-        "@ai-sdk/svelte": "0.0.20",
-        "@ai-sdk/ui-utils": "0.0.17",
-        "@ai-sdk/vue": "0.0.21",
+        "@ai-sdk/provider": "1.0.1",
+        "@ai-sdk/provider-utils": "2.0.2",
+        "@ai-sdk/react": "1.0.2",
+        "@ai-sdk/ui-utils": "1.0.2",
         "@opentelemetry/api": "1.9.0",
-        "eventsource-parser": "1.1.2",
-        "json-schema": "0.4.0",
         "jsondiffpatch": "0.6.0",
-        "nanoid": "3.3.6",
-        "secure-json-parse": "2.7.0",
-        "sswr": "2.1.0",
-        "zod-to-json-schema": "3.22.5"
+        "zod-to-json-schema": "^3.23.5"
       },
       "engines": {
         "node": ">=18"
       },
       "peerDependencies": {
-        "openai": "^4.42.0",
-        "react": "^18 || ^19",
-        "svelte": "^3.0.0 || ^4.0.0",
+        "react": "^18 || ^19 || ^19.0.0-rc",
         "zod": "^3.0.0"
       },
       "peerDependenciesMeta": {
-        "openai": {
-          "optional": true
-        },
         "react": {
           "optional": true
         },
-        "svelte": {
-          "optional": true
-        },
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ai/node_modules/@ai-sdk/provider": {
-      "version": "0.0.12",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "json-schema": "0.4.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/ai/node_modules/@ai-sdk/provider-utils": {
-      "version": "1.0.2",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "0.0.12",
-        "eventsource-parser": "1.1.2",
-        "nanoid": "3.3.6",
-        "secure-json-parse": "2.7.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.0.0"
-      },
-      "peerDependenciesMeta": {
         "zod": {
           "optional": true
         }
@@ -7134,18 +6790,6 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
-    "node_modules/code-red": {
-      "version": "1.0.4",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@types/estree": "^1.0.1",
-        "acorn": "^8.10.0",
-        "estree-walker": "^3.0.3",
-        "periscopic": "^3.1.0"
-      }
-    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -7306,18 +6950,6 @@
         "hyphenate-style-name": "^1.0.3"
       }
     },
-    "node_modules/css-tree": {
-      "version": "2.3.1",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "mdn-data": "2.0.30",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -8519,14 +8151,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/estree-walker": {
-      "version": "3.0.3",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -8556,12 +8180,12 @@
       }
     },
     "node_modules/eventsource-parser": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-1.1.2.tgz",
-      "integrity": "sha512-v0eOBUbiaFojBu2s2NPBfYUoRR9GjcDNvCXVaqEf5vVfpIAh9f8RCo4vXTP8c63QRKCFwoLpMpTdPwwhEKVgzA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.0.tgz",
+      "integrity": "sha512-T1C0XCUimhxVQzW4zFipdx0SficT651NnkR0ZSH3yQwh+mFMdLfgjABVi4YtMTtaL4s168593DaoaRLMqryavA==",
       "license": "MIT",
       "engines": {
-        "node": ">=14.18"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/expand-template": {
@@ -10415,14 +10039,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-reference": {
-      "version": "3.0.2",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/estree": "*"
-      }
-    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -10939,11 +10555,6 @@
         "node": ">=6.11.5"
       }
     },
-    "node_modules/locate-character": {
-      "version": "3.0.0",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -11058,14 +10669,6 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.10",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      }
-    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -11426,11 +11029,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.30",
-      "license": "CC0-1.0",
-      "peer": true
-    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -12356,9 +11954,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -13229,16 +12827,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/periscopic": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-walker": "^3.0.0",
-        "is-reference": "^3.0.0"
-      }
-    },
     "node_modules/pg": {
       "version": "8.12.0",
       "license": "MIT",
@@ -13969,24 +13557,6 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
-    "node_modules/postcss/node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
     "node_modules/postgres-array": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-3.0.2.tgz",
@@ -15615,18 +15185,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/sswr": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/sswr/-/sswr-2.1.0.tgz",
-      "integrity": "sha512-Cqc355SYlTAaUt8iDPaC/4DPPXK925PePLMxyBKuWd5kKc5mwsG3nT9+Mq2tyguL5s7b4Jg+IRMpTRsNTAfpSQ==",
-      "license": "MIT",
-      "dependencies": {
-        "swrev": "^4.0.0"
-      },
-      "peerDependencies": {
-        "svelte": "^4.0.0 || ^5.0.0-next.0"
-      }
-    },
     "node_modules/stack-generator": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
@@ -16177,46 +15735,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/svelte": {
-      "version": "4.2.18",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@ampproject/remapping": "^2.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.15",
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "@types/estree": "^1.0.1",
-        "acorn": "^8.9.0",
-        "aria-query": "^5.3.0",
-        "axobject-query": "^4.0.0",
-        "code-red": "^1.0.3",
-        "css-tree": "^2.3.1",
-        "estree-walker": "^3.0.3",
-        "is-reference": "^3.0.1",
-        "locate-character": "^3.0.0",
-        "magic-string": "^0.30.4",
-        "periscopic": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/svelte/node_modules/aria-query": {
-      "version": "5.3.0",
-      "license": "Apache-2.0",
-      "peer": true,
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
-    "node_modules/svelte/node_modules/axobject-query": {
-      "version": "4.1.0",
-      "license": "Apache-2.0",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/swr": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
@@ -16230,21 +15748,6 @@
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/swrev": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/swrev/-/swrev-4.0.0.tgz",
-      "integrity": "sha512-LqVcOHSB4cPGgitD1riJ1Hh4vdmITOp+BkmfmXRh4hSF/t7EnS4iD+SOTmq7w5pPm/SiPeto4ADbKS6dHUDWFA==",
-      "license": "MIT"
-    },
-    "node_modules/swrv": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/swrv/-/swrv-1.0.4.tgz",
-      "integrity": "sha512-zjEkcP8Ywmj+xOJW3lIT65ciY/4AL4e/Or7Gj0MzU3zBJNMdJiT8geVZhINavnlHRMMCcJLHhraLTAiDOTmQ9g==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "vue": ">=3.2.26 < 4"
-      }
-    },
     "node_modules/tailwind-merge": {
       "version": "2.4.0",
       "license": "MIT",
@@ -16510,6 +16013,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/throttleit": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-2.1.0.tgz",
+      "integrity": "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/tinyexec": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
@@ -17075,7 +16590,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -17889,26 +17404,6 @@
         "@esbuild/win32-x64": "0.21.5"
       }
     },
-    "node_modules/vue": {
-      "version": "3.4.33",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.4.33",
-        "@vue/compiler-sfc": "3.4.33",
-        "@vue/runtime-dom": "3.4.33",
-        "@vue/server-renderer": "3.4.33",
-        "@vue/shared": "3.4.33"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
@@ -18371,10 +17866,12 @@
       }
     },
     "node_modules/zod-to-json-schema": {
-      "version": "3.22.5",
+      "version": "3.23.5",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.23.5.tgz",
+      "integrity": "sha512-5wlSS0bXfF/BrL4jPAbz9da5hDlDptdEppYfe+x4eIJ7jioqKG9uUxOwPzqof09u/XeVdrgFu29lZi+8XNDJtA==",
       "license": "ISC",
       "peerDependencies": {
-        "zod": "^3.22.4"
+        "zod": "^3.23.3"
       }
     },
     "node_modules/zustand": {

From 1d2f7a2cf61b838c842069c3a5579d5ff3c49a59 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Fri, 22 Nov 2024 14:41:15 +0100
Subject: [PATCH 11/24] use ollama provider if ollama api is detected

---
 apps/postgres-new/package.json |  1 +
 apps/postgres-new/sw.ts        | 14 ++++---
 package-lock.json              | 73 ++++++++++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json
index 6abb6362..0c9a5a1d 100644
--- a/apps/postgres-new/package.json
+++ b/apps/postgres-new/package.json
@@ -58,6 +58,7 @@
     "nanoid": "^5.0.7",
     "next": "14.2.3",
     "next-themes": "^0.3.0",
+    "ollama-ai-provider": "^0.16.1",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index a36ea2a5..7a9fbb7e 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -1,4 +1,5 @@
 import { createOpenAI } from '@ai-sdk/openai'
+import { ollama } from 'ollama-ai-provider'
 import * as kv from 'idb-keyval'
 import { convertToCoreMessages, streamText, ToolInvocation } from 'ai'
 import { codeBlock } from 'common-tags'
@@ -15,7 +16,7 @@ declare const self: ServiceWorkerGlobalScope
 
 async function handleRequest(event: FetchEvent) {
   const url = new URL(event.request.url)
-  const isChatRoute = url.pathname === '/api/chat' && event.request.method === 'POST'
+  const isChatRoute = url.pathname.startsWith('/api/chat') && event.request.method === 'POST'
   if (isChatRoute) {
     const modelProvider = (await kv.get('modelProvider')) as ModelProvider | undefined
 
@@ -23,10 +24,13 @@ async function handleRequest(event: FetchEvent) {
       return fetch(event.request)
     }
 
-    const adapter = createOpenAI({
-      baseURL: modelProvider.baseUrl,
-      apiKey: modelProvider.apiKey,
-    })
+    const adapter =
+      modelProvider.baseUrl === 'http://localhost:11434/api'
+        ? ollama
+        : createOpenAI({
+            baseURL: modelProvider.baseUrl,
+            apiKey: modelProvider.apiKey,
+          })
     const model = adapter(modelProvider.model)
 
     const { messages }: { messages: Message[] } = await event.request.json()
diff --git a/package-lock.json b/package-lock.json
index 586ce8ef..6a24b390 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -157,6 +157,7 @@
         "nanoid": "^5.0.7",
         "next": "14.2.3",
         "next-themes": "^0.3.0",
+        "ollama-ai-provider": "^0.16.1",
         "react": "^18",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18",
@@ -12470,6 +12471,72 @@
       "integrity": "sha512-lgHwxlxV1qIg1Eap7LgIeoBWIMFibOjbrYPIPJZcI1mmGAI2m3lNYpK12Y+GBdPQ0U1hRwSord7GIaawz962qQ==",
       "license": "MIT"
     },
+    "node_modules/ollama-ai-provider": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ollama-ai-provider/-/ollama-ai-provider-0.16.1.tgz",
+      "integrity": "sha512-0vSQVz5Y/LguyzfO4bi1JrrVGF/k2JvO8/uFR0wYmqDFp8KPp4+AhdENSynGBr1oRhMWOM4F1l6cv7UNDgRMjw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.26",
+        "@ai-sdk/provider-utils": "1.0.22",
+        "partial-json": "0.1.7"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ollama-ai-provider/node_modules/@ai-sdk/provider": {
+      "version": "0.0.26",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-0.0.26.tgz",
+      "integrity": "sha512-dQkfBDs2lTYpKM8389oopPdQgIU007GQyCbuPPrV+K6MtSII3HBfE0stUIMXUb44L+LK1t6GXPP7wjSzjO6uKg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "json-schema": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/ollama-ai-provider/node_modules/@ai-sdk/provider-utils": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-1.0.22.tgz",
+      "integrity": "sha512-YHK2rpj++wnLVc9vPGzGFP3Pjeld2MwhKinetA0zKXOoHAT/Jit5O8kZsxcSlJPu9wvcGT1UGZEjZrtO7PfFOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.26",
+        "eventsource-parser": "^1.1.2",
+        "nanoid": "^3.3.7",
+        "secure-json-parse": "^2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ollama-ai-provider/node_modules/eventsource-parser": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-1.1.2.tgz",
+      "integrity": "sha512-v0eOBUbiaFojBu2s2NPBfYUoRR9GjcDNvCXVaqEf5vVfpIAh9f8RCo4vXTP8c63QRKCFwoLpMpTdPwwhEKVgzA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
     "node_modules/on-exit-leak-free": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz",
@@ -12767,6 +12834,12 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/partial-json": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/partial-json/-/partial-json-0.1.7.tgz",
+      "integrity": "sha512-Njv/59hHaokb/hRUjce3Hdv12wd60MtM9Z5Olmn+nehe0QDAsRtRbJPvJ0Z91TusF0SuZRIvnM+S4l6EIP8leA==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",

From 571217169d172652f08176f065f9960ae07f0829 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Fri, 22 Nov 2024 15:26:12 +0100
Subject: [PATCH 12/24] fix

---
 .../model-provider/set-model-provider-dialog.tsx      | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
index a42e2e22..9f87103f 100644
--- a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
+++ b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
@@ -19,7 +19,10 @@ import { useApp } from '../app-provider'
 import { Switch } from '../ui/switch'
 
 const formSchema = z.object({
-  apiKey: z.string().min(1).optional(),
+  apiKey: z
+    .string()
+    .transform((str) => (str === '' ? undefined : str))
+    .optional(),
   baseUrl: z.string().min(1),
   model: z.string().min(1),
   enabled: z.boolean().default(true),
@@ -65,7 +68,7 @@ function SetModelProviderForm(props: { id: string; onSubmit: (values: FormSchema
             <FormItem>
               <FormLabel>Base URL</FormLabel>
               <FormControl>
-                <Input placeholder="http://localhost:11434/v1" {...field} />
+                <Input placeholder="http://localhost:11434/api" {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -117,8 +120,8 @@ export function SetModelProviderDialog(props: SetModelProviderDialogProps) {
             <Brain /> Set an external model provider
           </DialogTitle>
           <DialogDescription className="flex flex-col gap-4">
-            You can set your own external model provider compatible with the OpenAI API. Your model
-            provider informations will be saved in your browser.
+            You can use your own external model provider through Ollama or any provider compatible
+            with the OpenAI API. Your model provider settings will be saved in your browser.
           </DialogDescription>
         </DialogHeader>
         <div className="my-1 border-b" />

From 6ce3dd956255349e12042b99571acef943c0ad98 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Fri, 22 Nov 2024 16:58:33 +0100
Subject: [PATCH 13/24] system prompt

---
 apps/postgres-new/app/api/chat/route.ts       | 49 ++-----------------
 .../set-model-provider-dialog.tsx             | 20 +++++++-
 .../model-provider/use-model-provider.ts      |  1 +
 apps/postgres-new/components/ui/textarea.tsx  | 22 +++++++++
 apps/postgres-new/lib/system-prompt.ts        | 48 ++++++++++++++++++
 apps/postgres-new/sw.ts                       | 48 ++----------------
 6 files changed, 96 insertions(+), 92 deletions(-)
 create mode 100644 apps/postgres-new/components/ui/textarea.tsx
 create mode 100644 apps/postgres-new/lib/system-prompt.ts

diff --git a/apps/postgres-new/app/api/chat/route.ts b/apps/postgres-new/app/api/chat/route.ts
index 11d84e29..1488ef0f 100644
--- a/apps/postgres-new/app/api/chat/route.ts
+++ b/apps/postgres-new/app/api/chat/route.ts
@@ -2,8 +2,8 @@ import { createOpenAI } from '@ai-sdk/openai'
 import { Ratelimit } from '@upstash/ratelimit'
 import { kv } from '@vercel/kv'
 import { convertToCoreMessages, streamText, ToolInvocation, ToolResultPart } from 'ai'
-import { codeBlock } from 'common-tags'
-import { convertToCoreTools, maxMessageContext, maxRowLimit, tools } from '~/lib/tools'
+import { getSystemPrompt } from '~/lib/system-prompt'
+import { convertToCoreTools, maxMessageContext, tools } from '~/lib/tools'
 import { createClient } from '~/utils/supabase/server'
 import { ChatInferenceEventToolResult, logEvent } from '~/utils/telemetry'
 
@@ -72,49 +72,8 @@ export async function POST(req: Request) {
   const coreMessages = convertToCoreMessages(trimmedMessageContext)
   const coreTools = convertToCoreTools(tools)
 
-  const result = await streamText({
-    system: codeBlock`
-      You are a helpful database assistant. Under the hood you have access to an in-browser Postgres database called PGlite (https://github.com/electric-sql/pglite).
-      Some special notes about this database:
-      - foreign data wrappers are not supported
-      - the following extensions are available:
-        - plpgsql [pre-enabled]
-        - vector (https://github.com/pgvector/pgvector) [pre-enabled]
-          - use <=> for cosine distance (default to this)
-          - use <#> for negative inner product
-          - use <-> for L2 distance
-          - use <+> for L1 distance
-          - note queried vectors will be truncated/redacted due to their size - export as CSV if the full vector is required
-
-      When generating tables, do the following:
-      - For primary keys, always use "id bigint primary key generated always as identity" (not serial)
-      - Prefer 'text' over 'varchar'
-      - Keep explanations brief but helpful
-      - Don't repeat yourself after creating the table
-
-      When creating sample data:
-      - Make the data realistic, including joined data
-      - Check for existing records/conflicts in the table
-
-      When querying data, limit to 5 by default. The maximum number of rows you're allowed to fetch is ${maxRowLimit} (to protect AI from token abuse).
-      If the user needs to fetch more than ${maxRowLimit} rows at once, they can export the query as a CSV.
-
-      When performing FTS, always use 'simple' (languages aren't available).
-
-      When importing CSVs try to solve the problem yourself (eg. use a generic text column, then refine)
-      vs. asking the user to change the CSV. No need to select rows after importing.
-
-      You also know math. All math equations and expressions must be written in KaTex and must be wrapped in double dollar \`$$\`:
-        - Inline: $$\\sqrt{26}$$
-        - Multiline:
-            $$
-            \\sqrt{26}
-            $$
-
-      No images are allowed. Do not try to generate or link images, including base64 data URLs.
-
-      Feel free to suggest corrections for suspected typos.
-    `,
+  const result = streamText({
+    system: getSystemPrompt(),
     model: openai(chatModel),
     messages: coreMessages,
     tools: coreTools,
diff --git a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
index 9f87103f..e3bf1c8e 100644
--- a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
+++ b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
@@ -17,6 +17,8 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import { Brain } from 'lucide-react'
 import { useApp } from '../app-provider'
 import { Switch } from '../ui/switch'
+import { getSystemPrompt } from '~/lib/system-prompt'
+import { Textarea } from '../ui/textarea'
 
 const formSchema = z.object({
   apiKey: z
@@ -25,6 +27,7 @@ const formSchema = z.object({
     .optional(),
   baseUrl: z.string().min(1),
   model: z.string().min(1),
+  system: z.string().min(1).default(getSystemPrompt()),
   enabled: z.boolean().default(true),
 })
 
@@ -45,7 +48,7 @@ function SetModelProviderForm(props: { id: string; onSubmit: (values: FormSchema
 
   return (
     <Form {...form}>
-      <form id={props.id} onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+      <form id={props.id} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
         <FormField
           control={form.control}
           name="enabled"
@@ -100,6 +103,19 @@ function SetModelProviderForm(props: { id: string; onSubmit: (values: FormSchema
             </FormItem>
           )}
         />
+        <FormField
+          control={form.control}
+          name="system"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>System Prompt</FormLabel>
+              <FormControl>
+                <Textarea {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
       </form>
     </Form>
   )
@@ -114,7 +130,7 @@ export type SetModelProviderDialogProps = {
 export function SetModelProviderDialog(props: SetModelProviderDialogProps) {
   return (
     <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <DialogContent>
+      <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle className="flex gap-2 items-center mb-4">
             <Brain /> Set an external model provider
diff --git a/apps/postgres-new/components/model-provider/use-model-provider.ts b/apps/postgres-new/components/model-provider/use-model-provider.ts
index 4a147484..5090a6bb 100644
--- a/apps/postgres-new/components/model-provider/use-model-provider.ts
+++ b/apps/postgres-new/components/model-provider/use-model-provider.ts
@@ -5,6 +5,7 @@ export type ModelProvider = {
   apiKey?: string
   model: string
   baseUrl: string
+  system: string
   enabled: boolean
 }
 
diff --git a/apps/postgres-new/components/ui/textarea.tsx b/apps/postgres-new/components/ui/textarea.tsx
new file mode 100644
index 00000000..f88c1394
--- /dev/null
+++ b/apps/postgres-new/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/apps/postgres-new/lib/system-prompt.ts b/apps/postgres-new/lib/system-prompt.ts
new file mode 100644
index 00000000..4abdaf9b
--- /dev/null
+++ b/apps/postgres-new/lib/system-prompt.ts
@@ -0,0 +1,48 @@
+import { codeBlock } from 'common-tags'
+
+export function getSystemPrompt(options?: { maxRowLimit?: number }) {
+  const { maxRowLimit = 100 } = options ?? {}
+
+  return codeBlock`
+    You are a helpful database assistant. Under the hood you have access to an in-browser Postgres database called PGlite (https://github.com/electric-sql/pglite).
+    Some special notes about this database:
+    - foreign data wrappers are not supported
+    - the following extensions are available:
+      - plpgsql [pre-enabled]
+      - vector (https://github.com/pgvector/pgvector) [pre-enabled]
+        - use <=> for cosine distance (default to this)
+        - use <#> for negative inner product
+        - use <-> for L2 distance
+        - use <+> for L1 distance
+        - note queried vectors will be truncated/redacted due to their size - export as CSV if the full vector is required
+
+    When generating tables, do the following:
+    - For primary keys, always use "id bigint primary key generated always as identity" (not serial)
+    - Prefer 'text' over 'varchar'
+    - Keep explanations brief but helpful
+    - Don't repeat yourself after creating the table
+
+    When creating sample data:
+    - Make the data realistic, including joined data
+    - Check for existing records/conflicts in the table
+
+    When querying data, limit to 5 by default. The maximum number of rows you're allowed to fetch is ${maxRowLimit} (to protect AI from token abuse).
+    If the user needs to fetch more than ${maxRowLimit} rows at once, they can export the query as a CSV.
+
+    When performing FTS, always use 'simple' (languages aren't available).
+
+    When importing CSVs try to solve the problem yourself (eg. use a generic text column, then refine)
+    vs. asking the user to change the CSV. No need to select rows after importing.
+
+    You also know math. All math equations and expressions must be written in KaTex and must be wrapped in double dollar \`$$\`:
+      - Inline: $$\\sqrt{26}$$
+      - Multiline:
+          $$
+          \\sqrt{26}
+          $$
+
+    No images are allowed. Do not try to generate or link images, including base64 data URLs.
+
+    Feel free to suggest corrections for suspected typos.
+  `
+}
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index 7a9fbb7e..4ccaf02b 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -2,8 +2,7 @@ import { createOpenAI } from '@ai-sdk/openai'
 import { ollama } from 'ollama-ai-provider'
 import * as kv from 'idb-keyval'
 import { convertToCoreMessages, streamText, ToolInvocation } from 'ai'
-import { codeBlock } from 'common-tags'
-import { convertToCoreTools, maxMessageContext, maxRowLimit, tools } from './lib/tools'
+import { convertToCoreTools, maxMessageContext, tools } from './lib/tools'
 import type { ModelProvider } from './components/model-provider/use-model-provider'
 
 type Message = {
@@ -41,49 +40,8 @@ async function handleRequest(event: FetchEvent) {
     const coreMessages = convertToCoreMessages(trimmedMessageContext)
     const coreTools = convertToCoreTools(tools)
 
-    const result = await streamText({
-      system: codeBlock`
-    You are a helpful database assistant. Under the hood you have access to an in-browser Postgres database called PGlite (https://github.com/electric-sql/pglite).
-    Some special notes about this database:
-    - foreign data wrappers are not supported
-    - the following extensions are available:
-      - plpgsql [pre-enabled]
-      - vector (https://github.com/pgvector/pgvector) [pre-enabled]
-        - use <=> for cosine distance (default to this)
-        - use <#> for negative inner product
-        - use <-> for L2 distance
-        - use <+> for L1 distance
-        - note queried vectors will be truncated/redacted due to their size - export as CSV if the full vector is required
-
-    When generating tables, do the following:
-    - For primary keys, always use "id bigint primary key generated always as identity" (not serial)
-    - Prefer 'text' over 'varchar'
-    - Keep explanations brief but helpful
-    - Don't repeat yourself after creating the table
-
-    When creating sample data:
-    - Make the data realistic, including joined data
-    - Check for existing records/conflicts in the table
-
-    When querying data, limit to 5 by default. The maximum number of rows you're allowed to fetch is ${maxRowLimit} (to protect AI from token abuse).
-    If the user needs to fetch more than ${maxRowLimit} rows at once, they can export the query as a CSV.
-
-    When performing FTS, always use 'simple' (languages aren't available).
-
-    When importing CSVs try to solve the problem yourself (eg. use a generic text column, then refine)
-    vs. asking the user to change the CSV. No need to select rows after importing.
-
-    You also know math. All math equations and expressions must be written in KaTex and must be wrapped in double dollar \`$$\`:
-      - Inline: $$\\sqrt{26}$$
-      - Multiline:
-          $$
-          \\sqrt{26}
-          $$
-
-    No images are allowed. Do not try to generate or link images, including base64 data URLs.
-
-    Feel free to suggest corrections for suspected typos.
-  `,
+    const result = streamText({
+      system: modelProvider.system,
       model,
       messages: coreMessages,
       tools: coreTools,

From 00802c152d8df1715bce01cbb28661494a2aedf9 Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Fri, 22 Nov 2024 17:35:38 +0100
Subject: [PATCH 14/24] fix form

---
 .../model-provider/set-model-provider-dialog.tsx       | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
index e3bf1c8e..46cda31e 100644
--- a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
+++ b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
@@ -27,8 +27,8 @@ const formSchema = z.object({
     .optional(),
   baseUrl: z.string().min(1),
   model: z.string().min(1),
-  system: z.string().min(1).default(getSystemPrompt()),
-  enabled: z.boolean().default(true),
+  system: z.string().min(1),
+  enabled: z.boolean(),
 })
 
 type FormSchema = z.infer<typeof formSchema>
@@ -38,7 +38,11 @@ function SetModelProviderForm(props: { id: string; onSubmit: (values: FormSchema
 
   const form = useForm<FormSchema>({
     resolver: zodResolver(formSchema),
-    defaultValues: modelProvider.state,
+    defaultValues: {
+      enabled: true,
+      system: getSystemPrompt(),
+      ...modelProvider.state,
+    },
   })
 
   async function onSubmit(values: z.infer<typeof formSchema>) {

From 622e3a745ac7f59373f595a4d513584482cf917b Mon Sep 17 00:00:00 2001
From: Julien Goux <hi@jgoux.dev>
Date: Mon, 25 Nov 2024 10:48:57 +0100
Subject: [PATCH 15/24] disable state

---
 .../sidebar/set-external-model-provider-button.tsx           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
index 4f26fb88..b63e6473 100644
--- a/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
+++ b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
@@ -5,6 +5,7 @@ import { useApp } from '../app-provider'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 import { SetModelProviderDialog } from '../model-provider/set-model-provider-dialog'
 import { useState } from 'react'
+import { cn } from '~/lib/utils'
 
 type SetExternalModelProviderButtonProps = {
   collapsed?: boolean
@@ -16,11 +17,13 @@ export function SetExternalModelProviderButton(props: SetExternalModelProviderBu
 
   const modelName = modelProvider.state?.model.split('/').at(-1)
   const text = modelName ?? 'Set external model'
+  const disabled = modelProvider.state?.enabled === false
   const button = props.collapsed ? (
     <Tooltip>
       <TooltipTrigger asChild>
         <m.div layout="position" layoutId="set-external-model-button">
           <Button
+            className={cn(disabled && 'opacity-50')}
             size={'icon'}
             variant="outline"
             onClick={() => setIsSetModelProviderDialogOpen(true)}
@@ -36,7 +39,7 @@ export function SetExternalModelProviderButton(props: SetExternalModelProviderBu
   ) : (
     <m.div layout="position" layoutId="set-external-model-button">
       <Button
-        className="w-full gap-2"
+        className={cn('w-full gap-2', disabled && 'opacity-50')}
         variant="outline"
         onClick={() => setIsSetModelProviderDialogOpen(true)}
       >

From d953459289ab75da6ed7aff074c065995e8a72bf Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Tue, 26 Nov 2024 21:00:31 -0700
Subject: [PATCH 16/24] fix: add max steps back

---
 apps/postgres-new/components/workspace.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/postgres-new/components/workspace.tsx b/apps/postgres-new/components/workspace.tsx
index 4ffeba6b..d9636f20 100644
--- a/apps/postgres-new/components/workspace.tsx
+++ b/apps/postgres-new/components/workspace.tsx
@@ -77,6 +77,7 @@ export default function Workspace({
   const { messages, setMessages, append, stop } = useChat({
     id: databaseId,
     api: '/api/chat',
+    maxSteps: 10,
     keepLastMessageOnError: true,
     onToolCall: onToolCall as any, // our `OnToolCall` type is more specific than `ai` SDK's
     body: {

From 91a3dc2ee9616f3a63b15d6e411ea839967e3370 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Wed, 27 Nov 2024 15:42:03 -0700
Subject: [PATCH 17/24] feat(byo-llm): dialog ui tweaks

---
 .../set-model-provider-dialog.tsx             | 232 +++++++++++++-----
 .../model-provider/use-model-provider.ts      |  16 +-
 apps/postgres-new/components/providers.tsx    |   6 +-
 apps/postgres-new/lib/llm-provider.ts         |  27 ++
 apps/postgres-new/sw.ts                       |  47 ++--
 apps/postgres-new/tsconfig.json               |   1 +
 apps/postgres-new/vite.config.mts             |  14 +-
 7 files changed, 246 insertions(+), 97 deletions(-)
 create mode 100644 apps/postgres-new/lib/llm-provider.ts

diff --git a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
index 46cda31e..0ca8758a 100644
--- a/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
+++ b/apps/postgres-new/components/model-provider/set-model-provider-dialog.tsx
@@ -1,5 +1,13 @@
 'use client'
 
+import { zodResolver } from '@hookform/resolvers/zod'
+import { m } from 'framer-motion'
+import { Brain, Expand } from 'lucide-react'
+import { useState } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
+import { z } from 'zod'
+import { useApp } from '~/components/app-provider'
+import { Button, ButtonProps } from '~/components/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -8,17 +16,19 @@ import {
   DialogHeader,
   DialogTitle,
 } from '~/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '~/components/ui/form'
 import { Input } from '~/components/ui/input'
-import { Button } from '../ui/button'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-import { useForm } from 'react-hook-form'
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
-import { Brain } from 'lucide-react'
-import { useApp } from '../app-provider'
-import { Switch } from '../ui/switch'
+import { Switch } from '~/components/ui/switch'
+import { Textarea } from '~/components/ui/textarea'
+import { getProviderUrl } from '~/lib/llm-provider'
 import { getSystemPrompt } from '~/lib/system-prompt'
-import { Textarea } from '../ui/textarea'
 
 const formSchema = z.object({
   apiKey: z
@@ -39,12 +49,16 @@ function SetModelProviderForm(props: { id: string; onSubmit: (values: FormSchema
   const form = useForm<FormSchema>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      enabled: true,
+      enabled: false,
       system: getSystemPrompt(),
       ...modelProvider.state,
     },
   })
 
+  const isEnabled = useWatch({ control: form.control, name: 'enabled' })
+
+  const [isPromptExpanded, setIsPromptExpanded] = useState(false)
+
   async function onSubmit(values: z.infer<typeof formSchema>) {
     await modelProvider.set(values)
     props.onSubmit(values)
@@ -52,7 +66,11 @@ function SetModelProviderForm(props: { id: string; onSubmit: (values: FormSchema
 
   return (
     <Form {...form}>
-      <form id={props.id} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+      <form
+        id={props.id}
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-4 min-w-0"
+      >
         <FormField
           control={form.control}
           name="enabled"
@@ -68,63 +86,143 @@ function SetModelProviderForm(props: { id: string; onSubmit: (values: FormSchema
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="baseUrl"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Base URL</FormLabel>
-              <FormControl>
-                <Input placeholder="http://localhost:11434/api" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="apiKey"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>API Key (optional)</FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="model"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Model</FormLabel>
-              <FormControl>
-                <Input placeholder="llama3.1:70b" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="system"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>System Prompt</FormLabel>
-              <FormControl>
-                <Textarea {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        {isEnabled && (
+          <>
+            <FormField
+              control={form.control}
+              name="baseUrl"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Base URL</FormLabel>
+                  <FormControl>
+                    <>
+                      <Input placeholder="OpenAI compatible base URL" {...field} />
+                      <div className="flex gap-2">
+                        <MiniButton
+                          onClick={(e) => {
+                            e.preventDefault()
+                            form.setValue('baseUrl', getProviderUrl('openai'))
+                            form.setValue('model', 'gpt-4o')
+                          }}
+                        >
+                          OpenAI
+                        </MiniButton>
+                        <MiniButton
+                          onClick={(e) => {
+                            e.preventDefault()
+                            form.setValue('baseUrl', getProviderUrl('x-ai'))
+                            form.setValue('model', 'grok-beta')
+                          }}
+                        >
+                          xAI
+                        </MiniButton>
+                        <MiniButton
+                          onClick={(e) => {
+                            e.preventDefault()
+                            field.onChange({ target: { value: getProviderUrl('openrouter') } })
+                            form.setValue('model', '')
+                          }}
+                        >
+                          OpenRouter
+                        </MiniButton>
+                      </div>
+                    </>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="apiKey"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>API key</FormLabel>
+                  <FormControl>
+                    <Input placeholder="API key" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="model"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Model</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Model" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="system"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>System prompt</FormLabel>
+                  <FormControl>
+                    <>
+                      <m.div
+                        className="flex gap-2 rounded-md bg-secondary p-4 text-sm text-primary/50 cursor-pointer"
+                        onClick={() => {
+                          setIsPromptExpanded(true)
+                        }}
+                      >
+                        <div className="flex-1 max-h-24 overflow-hidden relative">
+                          {field.value}
+                          <div className="absolute inset-x-0 -bottom-6 h-16 bg-gradient-to-t from-secondary to-transparent" />
+                        </div>
+                        <Expand size={16} />
+                      </m.div>
+                      {isPromptExpanded && (
+                        <div className="absolute inset-0 p-4 pt-8 bg-background flex flex-col gap-2 items-end">
+                          <m.div
+                            variants={{
+                              hidden: { opacity: 0, y: 20 },
+                              show: { opacity: 1, y: 0 },
+                            }}
+                            initial="hidden"
+                            animate="show"
+                            className="flex-1 self-stretch flex"
+                          >
+                            <Textarea {...field} className="resize-none" />
+                          </m.div>
+                          <Button
+                            variant="outline"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              setIsPromptExpanded(false)
+                            }}
+                          >
+                            Set prompt
+                          </Button>
+                        </div>
+                      )}
+                    </>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </>
+        )}
       </form>
     </Form>
   )
 }
 
+function MiniButton({ children, ...props }: ButtonProps) {
+  return (
+    <Button variant="outline" className="h-auto py-1 px-2 text-xs" {...props}>
+      {children}
+    </Button>
+  )
+}
+
 export type SetModelProviderDialogProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -137,11 +235,11 @@ export function SetModelProviderDialog(props: SetModelProviderDialogProps) {
       <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle className="flex gap-2 items-center mb-4">
-            <Brain /> Set an external model provider
+            <Brain /> Bring your own LLM
           </DialogTitle>
-          <DialogDescription className="flex flex-col gap-4">
-            You can use your own external model provider through Ollama or any provider compatible
-            with the OpenAI API. Your model provider settings will be saved in your browser.
+          <DialogDescription>
+            Bring your own OpenAI-compatible API. All settings and credentials are saved locally in
+            your browser.
           </DialogDescription>
         </DialogHeader>
         <div className="my-1 border-b" />
diff --git a/apps/postgres-new/components/model-provider/use-model-provider.ts b/apps/postgres-new/components/model-provider/use-model-provider.ts
index 5090a6bb..ff093582 100644
--- a/apps/postgres-new/components/model-provider/use-model-provider.ts
+++ b/apps/postgres-new/components/model-provider/use-model-provider.ts
@@ -9,22 +9,32 @@ export type ModelProvider = {
   enabled: boolean
 }
 
+let configStore: kv.UseStore
+
+export function getConfigStore() {
+  if (configStore) {
+    return configStore
+  }
+  configStore = kv.createStore('/database.build/config', 'config')
+  return configStore
+}
+
 export function useModelProvider() {
   const [modelProvider, setModelProvider] = useState<ModelProvider | undefined>()
 
   const set = useCallback(async (modelProvider: ModelProvider) => {
-    await kv.set('modelProvider', modelProvider)
+    await kv.set('modelProvider', modelProvider, getConfigStore())
     setModelProvider(modelProvider)
   }, [])
 
   const remove = useCallback(async () => {
-    await kv.del('modelProvider')
+    await kv.del('modelProvider', getConfigStore())
     setModelProvider(undefined)
   }, [])
 
   useEffect(() => {
     async function init() {
-      const modelProvider = await kv.get('modelProvider')
+      const modelProvider = await kv.get('modelProvider', getConfigStore())
       setModelProvider(modelProvider)
     }
     init()
diff --git a/apps/postgres-new/components/providers.tsx b/apps/postgres-new/components/providers.tsx
index 2f7e7ec4..4581158b 100644
--- a/apps/postgres-new/components/providers.tsx
+++ b/apps/postgres-new/components/providers.tsx
@@ -10,9 +10,11 @@ import { ThemeProvider } from './theme-provider'
 const queryClient = new QueryClient()
 
 async function registerServiceWorker() {
-  await navigator.serviceWorker.register('/sw.mjs').catch((error) => {
+  try {
+    await navigator.serviceWorker.register('/sw.mjs')
+  } catch (error) {
     console.error('Failed to register service worker', error)
-  })
+  }
 }
 
 export default function Providers({ children }: PropsWithChildren) {
diff --git a/apps/postgres-new/lib/llm-provider.ts b/apps/postgres-new/lib/llm-provider.ts
new file mode 100644
index 00000000..2ea277f5
--- /dev/null
+++ b/apps/postgres-new/lib/llm-provider.ts
@@ -0,0 +1,27 @@
+const providerUrlMap = new Map([
+  ['openai', 'https://api.openai.com/v1'],
+  ['x-ai', 'https://api.x.ai/v1'],
+  ['openrouter', 'https://openrouter.ai/api/v1'],
+] as const)
+
+type MapKeys<T> = T extends Map<infer K, any> ? K : never
+
+export type Provider = MapKeys<typeof providerUrlMap>
+
+export function getProviderUrl(provider: Provider) {
+  const url = providerUrlMap.get(provider)
+
+  if (!url) {
+    throw new Error(`unknown provider: ${provider}`)
+  }
+
+  return url
+}
+
+export function getProviderId(apiUrl: string): Provider | undefined {
+  for (const [key, value] of providerUrlMap.entries()) {
+    if (value === apiUrl) {
+      return key
+    }
+  }
+}
diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index 4ccaf02b..e7d471be 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -1,9 +1,8 @@
 import { createOpenAI } from '@ai-sdk/openai'
-import { ollama } from 'ollama-ai-provider'
-import * as kv from 'idb-keyval'
 import { convertToCoreMessages, streamText, ToolInvocation } from 'ai'
-import { convertToCoreTools, maxMessageContext, tools } from './lib/tools'
-import type { ModelProvider } from './components/model-provider/use-model-provider'
+import * as kv from 'idb-keyval'
+import { getConfigStore, type ModelProvider } from '~/components/model-provider/use-model-provider'
+import { convertToCoreTools, maxMessageContext, tools } from '~/lib/tools'
 
 type Message = {
   role: 'user' | 'assistant'
@@ -17,19 +16,17 @@ async function handleRequest(event: FetchEvent) {
   const url = new URL(event.request.url)
   const isChatRoute = url.pathname.startsWith('/api/chat') && event.request.method === 'POST'
   if (isChatRoute) {
-    const modelProvider = (await kv.get('modelProvider')) as ModelProvider | undefined
+    const modelProvider = await kv.get<ModelProvider>('modelProvider', getConfigStore())
 
     if (!modelProvider?.enabled) {
       return fetch(event.request)
     }
 
-    const adapter =
-      modelProvider.baseUrl === 'http://localhost:11434/api'
-        ? ollama
-        : createOpenAI({
-            baseURL: modelProvider.baseUrl,
-            apiKey: modelProvider.apiKey,
-          })
+    const adapter = createOpenAI({
+      baseURL: modelProvider.baseUrl,
+      apiKey: modelProvider.apiKey,
+    })
+
     const model = adapter(modelProvider.model)
 
     const { messages }: { messages: Message[] } = await event.request.json()
@@ -40,21 +37,27 @@ async function handleRequest(event: FetchEvent) {
     const coreMessages = convertToCoreMessages(trimmedMessageContext)
     const coreTools = convertToCoreTools(tools)
 
-    const result = streamText({
-      system: modelProvider.system,
-      model,
-      messages: coreMessages,
-      tools: coreTools,
-      onFinish: (event) => {
-        console.log('Hello from service worker', event)
-      },
-    })
-    return result.toDataStreamResponse()
+    try {
+      const result = streamText({
+        system: modelProvider.system,
+        model,
+        messages: coreMessages,
+        tools: coreTools,
+      })
+
+      return result.toDataStreamResponse()
+    } catch (error) {
+      return new Response(`Error streaming LLM from service worker: ${error}`, { status: 500 })
+    }
   }
 
   return fetch(event.request)
 }
 
+self.addEventListener('activate', function (event) {
+  return self.clients.claim()
+})
+
 self.addEventListener('fetch', (event) => {
   event.respondWith(handleRequest(event))
 })
diff --git a/apps/postgres-new/tsconfig.json b/apps/postgres-new/tsconfig.json
index 99cd20a6..1d9a74de 100644
--- a/apps/postgres-new/tsconfig.json
+++ b/apps/postgres-new/tsconfig.json
@@ -4,6 +4,7 @@
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
+    "target": "ES2015",
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
diff --git a/apps/postgres-new/vite.config.mts b/apps/postgres-new/vite.config.mts
index ae4d1d9e..3c1c76cd 100644
--- a/apps/postgres-new/vite.config.mts
+++ b/apps/postgres-new/vite.config.mts
@@ -1,14 +1,22 @@
-import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
+  define: {
+    'process.env': {},
+  },
+  resolve: {
+    alias: {
+      '~': fileURLToPath(new URL('.', import.meta.url)),
+    },
+  },
   build: {
     lib: {
-      entry: resolve(__dirname, 'sw.ts'),
+      entry: fileURLToPath(new URL('sw.ts', import.meta.url)),
       fileName: 'sw',
       formats: ['es'],
     },
-    outDir: resolve(__dirname, 'public'),
+    outDir: fileURLToPath(new URL('public', import.meta.url)),
     emptyOutDir: false,
     copyPublicDir: false,
   },

From 04f6c1992cdcf2f50720410ac3ca2d2db22f494e Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Wed, 27 Nov 2024 15:43:50 -0700
Subject: [PATCH 18/24] feat(byo-llm): inform user of llm api errors

---
 apps/postgres-new/components/app-provider.tsx | 11 +++++
 apps/postgres-new/components/chat.tsx         | 40 ++++++++++++++++++-
 .../set-external-model-provider-button.tsx    | 27 +++++--------
 apps/postgres-new/components/workspace.tsx    | 11 ++++-
 4 files changed, 71 insertions(+), 18 deletions(-)

diff --git a/apps/postgres-new/components/app-provider.tsx b/apps/postgres-new/components/app-provider.tsx
index 1198d746..557a3508 100644
--- a/apps/postgres-new/components/app-provider.tsx
+++ b/apps/postgres-new/components/app-provider.tsx
@@ -253,6 +253,9 @@ export default function AppProvider({ children }: AppProps) {
   const [isLegacyDomain, setIsLegacyDomain] = useState(false)
   const [isLegacyDomainRedirect, setIsLegacyDomainRedirect] = useState(false)
 
+  const [modelProviderError, setModelProviderError] = useState<string>()
+  const [isModelProviderDialogOpen, setIsModelProviderDialogOpen] = useState(false)
+
   useEffect(() => {
     const isLegacyDomain = window.location.hostname === legacyDomainHostname
     const urlParams = new URLSearchParams(window.location.search)
@@ -273,6 +276,8 @@ export default function AppProvider({ children }: AppProps) {
         isLoadingUser,
         liveShare,
         modelProvider,
+        modelProviderError,
+        setModelProviderError,
         signIn,
         signOut,
         isSignInDialogOpen,
@@ -281,6 +286,8 @@ export default function AppProvider({ children }: AppProps) {
         setIsRenameDialogOpen,
         isRateLimited,
         setIsRateLimited,
+        isModelProviderDialogOpen,
+        setIsModelProviderDialogOpen,
         focusRef,
         dbManager,
         pgliteVersion,
@@ -309,6 +316,8 @@ export type AppContextValues = {
   setIsRenameDialogOpen: (open: boolean) => void
   isRateLimited: boolean
   setIsRateLimited: (limited: boolean) => void
+  isModelProviderDialogOpen: boolean
+  setIsModelProviderDialogOpen: (open: boolean) => void
   focusRef: RefObject<FocusHandle>
   dbManager?: DbManager
   pgliteVersion?: string
@@ -321,6 +330,8 @@ export type AppContextValues = {
     isLiveSharing: boolean
   }
   modelProvider: ReturnType<typeof useModelProvider>
+  modelProviderError?: string
+  setModelProviderError: (error: string | undefined) => void
   isLegacyDomain: boolean
   isLegacyDomainRedirect: boolean
 }
diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx
index 6834015c..66cd5ccf 100644
--- a/apps/postgres-new/components/chat.tsx
+++ b/apps/postgres-new/components/chat.tsx
@@ -3,7 +3,7 @@
 import { Message, generateId } from 'ai'
 import { useChat } from 'ai/react'
 import { AnimatePresence, m } from 'framer-motion'
-import { ArrowDown, ArrowUp, Flame, Paperclip, PlugIcon, Square } from 'lucide-react'
+import { AlertCircle, ArrowDown, ArrowUp, Flame, Paperclip, PlugIcon, Square } from 'lucide-react'
 import {
   FormEventHandler,
   useCallback,
@@ -59,6 +59,8 @@ export default function Chat() {
     isRateLimited,
     liveShare,
     modelProvider,
+    modelProviderError,
+    setIsModelProviderDialogOpen,
   } = useApp()
   const [inputFocusState, setInputFocusState] = useState(false)
 
@@ -302,6 +304,42 @@ export default function Chat() {
                   isLast={i === messages.length - 1}
                 />
               ))}
+              <AnimatePresence initial={false}>
+                {modelProviderError && !isLoading && (
+                  <m.div
+                    layout="position"
+                    className="flex flex-col gap-4 justify-start items-center max-w-96 p-4 bg-destructive rounded-md text-sm"
+                    variants={{
+                      hidden: { scale: 0 },
+                      show: { scale: 1, transition: { delay: 0.5 } },
+                    }}
+                    initial="hidden"
+                    animate="show"
+                    exit="hidden"
+                  >
+                    <AlertCircle size={64} strokeWidth={1} />
+                    <div className="flex flex-col items-center text-start gap-4">
+                      <h3 className="font-bold">Whoops!</h3>
+                      <p className="text-center">
+                        There was an error connecting to your custom model provider:{' '}
+                        {modelProviderError}
+                      </p>
+                      <p>
+                        Double check your{' '}
+                        <a
+                          className="underline cursor-pointer"
+                          onClick={() => {
+                            setIsModelProviderDialogOpen(true)
+                          }}
+                        >
+                          API info
+                        </a>
+                        .
+                      </p>
+                    </div>
+                  </m.div>
+                )}
+              </AnimatePresence>
               <AnimatePresence initial={false}>
                 {isRateLimited && !isLoading && (
                   <m.div
diff --git a/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
index b63e6473..3b1d871b 100644
--- a/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
+++ b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
@@ -1,32 +1,27 @@
 import { m } from 'framer-motion'
-import { Button } from '../ui/button'
 import { Brain } from 'lucide-react'
-import { useApp } from '../app-provider'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
-import { SetModelProviderDialog } from '../model-provider/set-model-provider-dialog'
-import { useState } from 'react'
-import { cn } from '~/lib/utils'
+import { useApp } from '~/components/app-provider'
+import { SetModelProviderDialog } from '~/components/model-provider/set-model-provider-dialog'
+import { Button } from '~/components/ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip'
 
 type SetExternalModelProviderButtonProps = {
   collapsed?: boolean
 }
 
 export function SetExternalModelProviderButton(props: SetExternalModelProviderButtonProps) {
-  const { modelProvider } = useApp()
-  const [isSetModelProviderDialogOpen, setIsSetModelProviderDialogOpen] = useState(false)
+  const { modelProvider, isModelProviderDialogOpen, setIsModelProviderDialogOpen } = useApp()
 
   const modelName = modelProvider.state?.model.split('/').at(-1)
-  const text = modelName ?? 'Set external model'
-  const disabled = modelProvider.state?.enabled === false
+  const text = modelProvider.state?.enabled ? modelName : 'Use your own LLM'
   const button = props.collapsed ? (
     <Tooltip>
       <TooltipTrigger asChild>
         <m.div layout="position" layoutId="set-external-model-button">
           <Button
-            className={cn(disabled && 'opacity-50')}
             size={'icon'}
             variant="outline"
-            onClick={() => setIsSetModelProviderDialogOpen(true)}
+            onClick={() => setIsModelProviderDialogOpen(true)}
           >
             <Brain size={16} strokeWidth={2} />
           </Button>
@@ -39,9 +34,9 @@ export function SetExternalModelProviderButton(props: SetExternalModelProviderBu
   ) : (
     <m.div layout="position" layoutId="set-external-model-button">
       <Button
-        className={cn('w-full gap-2', disabled && 'opacity-50')}
+        className="w-full gap-2"
         variant="outline"
-        onClick={() => setIsSetModelProviderDialogOpen(true)}
+        onClick={() => setIsModelProviderDialogOpen(true)}
       >
         <Brain size={18} strokeWidth={2} />
         <div className="inline-block whitespace-nowrap overflow-hidden text-ellipsis">{text}</div>
@@ -52,8 +47,8 @@ export function SetExternalModelProviderButton(props: SetExternalModelProviderBu
   return (
     <>
       <SetModelProviderDialog
-        open={isSetModelProviderDialogOpen}
-        onOpenChange={setIsSetModelProviderDialogOpen}
+        open={isModelProviderDialogOpen}
+        onOpenChange={setIsModelProviderDialogOpen}
       />
       {button}
     </>
diff --git a/apps/postgres-new/components/workspace.tsx b/apps/postgres-new/components/workspace.tsx
index d9636f20..33244bc3 100644
--- a/apps/postgres-new/components/workspace.tsx
+++ b/apps/postgres-new/components/workspace.tsx
@@ -61,7 +61,7 @@ export default function Workspace({
   onReply,
   onCancelReply,
 }: WorkspaceProps) {
-  const { setIsRateLimited } = useApp()
+  const { setIsRateLimited, modelProvider, setModelProviderError } = useApp()
   const isSmallBreakpoint = useBreakpoint('lg')
   const onToolCall = useOnToolCall(databaseId)
   const { mutateAsync: saveMessage } = useMessageCreateMutation(databaseId)
@@ -86,10 +86,19 @@ export default function Workspace({
     initialMessages:
       existingMessages && existingMessages.length > 0 ? existingMessages : initialMessages,
     async onFinish(message) {
+      setModelProviderError(undefined)
+
       // Order is important here
       await onReply?.(message, append)
       await saveMessage({ message })
     },
+    onError(error) {
+      if (modelProvider.state?.enabled) {
+        setModelProviderError(error.message)
+      } else {
+        setModelProviderError(undefined)
+      }
+    },
     async onResponse(response) {
       setIsRateLimited(response.status === 429)
     },

From 5a3f52743f53af743b63dbaf9c355dba27e5b6c9 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Wed, 27 Nov 2024 16:20:34 -0700
Subject: [PATCH 19/24] feat(byo-llm): store model/api on each message

---
 apps/postgres-new/components/workspace.tsx    | 21 ++++++-
 .../data/messages/message-create-mutation.ts  |  2 +-
 apps/postgres-new/lib/db/index.ts             | 58 +++++++++++++------
 3 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/apps/postgres-new/components/workspace.tsx b/apps/postgres-new/components/workspace.tsx
index 33244bc3..f1ee3136 100644
--- a/apps/postgres-new/components/workspace.tsx
+++ b/apps/postgres-new/components/workspace.tsx
@@ -66,6 +66,13 @@ export default function Workspace({
   const onToolCall = useOnToolCall(databaseId)
   const { mutateAsync: saveMessage } = useMessageCreateMutation(databaseId)
 
+  const apiInfo = modelProvider.state?.enabled
+    ? {
+        apiUrl: modelProvider.state.baseUrl,
+        model: modelProvider.state.model,
+      }
+    : undefined
+
   const { data: tables, isLoading: isLoadingSchema } = useTablesQuery({
     databaseId,
     schemas: ['public', 'meta'],
@@ -90,7 +97,12 @@ export default function Workspace({
 
       // Order is important here
       await onReply?.(message, append)
-      await saveMessage({ message })
+      await saveMessage({
+        message: {
+          ...message,
+          ...apiInfo,
+        },
+      })
     },
     onError(error) {
       if (modelProvider.state?.enabled) {
@@ -114,7 +126,12 @@ export default function Workspace({
 
       // Intentionally don't await so that framer animations aren't affected
       append(message)
-      saveMessage({ message })
+      saveMessage({
+        message: {
+          ...message,
+          ...apiInfo,
+        },
+      })
       onMessage?.(message, append)
     },
     [onMessage, setMessages, saveMessage, append]
diff --git a/apps/postgres-new/data/messages/message-create-mutation.ts b/apps/postgres-new/data/messages/message-create-mutation.ts
index e916317c..b6b798c9 100644
--- a/apps/postgres-new/data/messages/message-create-mutation.ts
+++ b/apps/postgres-new/data/messages/message-create-mutation.ts
@@ -1,6 +1,6 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { Message } from 'ai'
 import { useApp } from '~/components/app-provider'
+import { Message } from '~/lib/db'
 import { getMessagesQueryKey } from './messages-query'
 
 export type MessageCreateVariables = {
diff --git a/apps/postgres-new/lib/db/index.ts b/apps/postgres-new/lib/db/index.ts
index ca94e99c..e39847d4 100644
--- a/apps/postgres-new/lib/db/index.ts
+++ b/apps/postgres-new/lib/db/index.ts
@@ -1,7 +1,7 @@
 import type { PGliteInterface, PGliteOptions, Transaction } from '@electric-sql/pglite'
 import { raw, sql } from '@electric-sql/pglite/template'
 import { PGliteWorker } from '@electric-sql/pglite/worker'
-import { Message, ToolInvocation } from 'ai'
+import { Message as AiMessage, ToolInvocation } from 'ai'
 import { codeBlock } from 'common-tags'
 import { nanoid } from 'nanoid'
 
@@ -21,6 +21,11 @@ export type MetaMessage = {
   createdAt: Date
 }
 
+export type Message = AiMessage & {
+  apiUrl?: string
+  model?: string
+}
+
 export class DbManager {
   runtimePgVersion: string | undefined
   prefix = 'playground'
@@ -88,31 +93,38 @@ export class DbManager {
 
   async getMessages(databaseId: string) {
     const metaDb = await this.getMetaDb()
-    const { rows: messages } = await metaDb.query<Message>(
-      codeBlock`
-        select id, role, content, tool_invocations as "toolInvocations", created_at as "createdAt"
-        from messages where database_id = $1
-        order by created_at asc
-      `,
-      [databaseId]
-    )
+    const { rows: messages } = await metaDb.sql<Message>`
+      select
+        id,
+        role,
+        content,
+        tool_invocations as "toolInvocations",
+        created_at as "createdAt",
+        api_url as "apiUrl",
+        model
+      from messages
+      where database_id = ${databaseId}
+      order by created_at asc
+    `
+
     return messages
   }
 
   async createMessage(databaseId: string, message: Message) {
     const metaDb = await this.getMetaDb()
 
-    if (message.toolInvocations) {
-      await metaDb.query(
-        'insert into messages (id, database_id, role, content, tool_invocations) values ($1, $2, $3, $4, $5)',
-        [message.id, databaseId, message.role, message.content, message.toolInvocations]
-      )
-    } else {
-      await metaDb.query(
-        'insert into messages (id, database_id, role, content) values ($1, $2, $3, $4)',
-        [message.id, databaseId, message.role, message.content]
+    await metaDb.sql`
+      insert into messages (id, database_id, role, content, tool_invocations, api_url, model)
+      values (
+        ${message.id},
+        ${databaseId},
+        ${message.role},
+        ${message.content},
+        ${message.toolInvocations},
+        ${message.apiUrl},
+        ${message.model}
       )
-    }
+    `
   }
 
   async exportMessages() {
@@ -493,6 +505,14 @@ const metaMigrations: Migration[] = [
       );
     `,
   },
+  {
+    version: '202411250001',
+    name: 'message_model',
+    sql: codeBlock`
+      alter table messages add column api_url text;
+      alter table messages add column model text;
+    `,
+  },
 ].sort()
 
 const migrations: Migration[] = [

From 792ec81631e0be262d15c7e18d366e972c10fedc Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Wed, 27 Nov 2024 16:57:16 -0700
Subject: [PATCH 20/24] feat(byo-llm): option to byo llm instead of signing in

---
 .../components/byo-llm-button.tsx             | 24 ++++++++++++
 apps/postgres-new/components/chat.tsx         | 13 +++----
 .../postgres-new/components/sidebar/index.tsx | 38 ++++++++++++++++++-
 .../set-external-model-provider-button.tsx    |  2 +-
 .../components/sidebar/sign-in-dialog.tsx     | 10 ++++-
 5 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 apps/postgres-new/components/byo-llm-button.tsx

diff --git a/apps/postgres-new/components/byo-llm-button.tsx b/apps/postgres-new/components/byo-llm-button.tsx
new file mode 100644
index 00000000..d09e2072
--- /dev/null
+++ b/apps/postgres-new/components/byo-llm-button.tsx
@@ -0,0 +1,24 @@
+import { Brain } from 'lucide-react'
+import { useApp } from '~/components/app-provider'
+import { Button } from '~/components/ui/button'
+
+export type ByoLlmButtonProps = {
+  onClick?: () => void
+}
+
+export default function ByoLlmButton({ onClick }: ByoLlmButtonProps) {
+  const { setIsModelProviderDialogOpen } = useApp()
+
+  return (
+    <Button
+      className="gap-2 text-base"
+      onClick={() => {
+        onClick?.()
+        setIsModelProviderDialogOpen(true)
+      }}
+    >
+      <Brain size={18} strokeWidth={2} />
+      Bring your own LLM
+    </Button>
+  )
+}
diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx
index 66cd5ccf..05a39690 100644
--- a/apps/postgres-new/components/chat.tsx
+++ b/apps/postgres-new/components/chat.tsx
@@ -22,6 +22,7 @@ import { requestFileUpload } from '~/lib/util'
 import { cn } from '~/lib/utils'
 import { AiIconAnimation } from './ai-icon-animation'
 import { useApp } from './app-provider'
+import ByoLlmButton from './byo-llm-button'
 import ChatMessage from './chat-message'
 import { CopyableField } from './copyable-field'
 import SignInButton from './sign-in-button'
@@ -431,11 +432,10 @@ export default function Chat() {
                 animate="show"
               >
                 <SignInButton />
-                <p className="font-lighter text-center">
-                  To prevent abuse we ask you to sign in before chatting with AI.
-                </p>
+                or
+                <ByoLlmButton />
                 <p
-                  className="underline cursor-pointer text-primary/50"
+                  className="underline cursor-pointer text-sm text-primary/50"
                   onClick={() => {
                     setIsSignInDialogOpen(true)
                   }}
@@ -485,9 +485,8 @@ export default function Chat() {
               exit="hidden"
             >
               <SignInButton />
-              <p className="font-lighter text-center text-sm">
-                To prevent abuse we ask you to sign in before chatting with AI.
-              </p>
+              or
+              <ByoLlmButton />
               <p
                 className="underline cursor-pointer text-sm text-primary/50"
                 onClick={() => {
diff --git a/apps/postgres-new/components/sidebar/index.tsx b/apps/postgres-new/components/sidebar/index.tsx
index e4f43f36..d9964d3d 100644
--- a/apps/postgres-new/components/sidebar/index.tsx
+++ b/apps/postgres-new/components/sidebar/index.tsx
@@ -12,6 +12,7 @@ import {
 } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
+import GitHubIcon from '~/assets/github-icon'
 import { useApp } from '~/components/app-provider'
 import ThemeDropdown from '~/components/theme-dropdown'
 import { Button } from '~/components/ui/button'
@@ -26,6 +27,7 @@ import { SignInDialog } from './sign-in-dialog'
 export default function Sidebar() {
   const {
     user,
+    signIn,
     signOut,
     focusRef,
     isSignInDialogOpen,
@@ -162,7 +164,7 @@ export default function Sidebar() {
             <m.div layout="position" layoutId="theme-dropdown">
               <ThemeDropdown className="w-full" />
             </m.div>
-            {user && (
+            {user ? (
               <m.div layout="position" layoutId="sign-out-button">
                 <Button
                   className="w-full gap-2"
@@ -175,6 +177,19 @@ export default function Sidebar() {
                   Sign out
                 </Button>
               </m.div>
+            ) : (
+              <m.div layout="position" layoutId="sign-in-button">
+                <Button
+                  className="w-full gap-2"
+                  variant="secondary"
+                  onClick={async () => {
+                    await signIn()
+                  }}
+                >
+                  <GitHubIcon className="text-xl" />
+                  Sign in with GitHub
+                </Button>
+              </m.div>
             )}
           </m.div>
         )}
@@ -237,7 +252,7 @@ export default function Sidebar() {
                 <p>Toggle theme</p>
               </TooltipContent>
             </Tooltip>
-            {user && (
+            {user ? (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <m.div layout="position" layoutId="sign-out-button">
@@ -256,6 +271,25 @@ export default function Sidebar() {
                   <p>Sign out</p>
                 </TooltipContent>
               </Tooltip>
+            ) : (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <m.div layout="position" layoutId="sign-in-button">
+                    <Button
+                      size={'icon'}
+                      variant="secondary"
+                      onClick={async () => {
+                        await signIn()
+                      }}
+                    >
+                      <GitHubIcon className="text-xl" />
+                    </Button>
+                  </m.div>
+                </TooltipTrigger>
+                <TooltipContent side="right">
+                  <p>Sign in with GitHub</p>
+                </TooltipContent>
+              </Tooltip>
             )}
           </div>
         </div>
diff --git a/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
index 3b1d871b..29e428c7 100644
--- a/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
+++ b/apps/postgres-new/components/sidebar/set-external-model-provider-button.tsx
@@ -13,7 +13,7 @@ export function SetExternalModelProviderButton(props: SetExternalModelProviderBu
   const { modelProvider, isModelProviderDialogOpen, setIsModelProviderDialogOpen } = useApp()
 
   const modelName = modelProvider.state?.model.split('/').at(-1)
-  const text = modelProvider.state?.enabled ? modelName : 'Use your own LLM'
+  const text = modelProvider.state?.enabled ? modelName : 'Bring your own LLM'
   const button = props.collapsed ? (
     <Tooltip>
       <TooltipTrigger asChild>
diff --git a/apps/postgres-new/components/sidebar/sign-in-dialog.tsx b/apps/postgres-new/components/sidebar/sign-in-dialog.tsx
index 115c8da3..4a428910 100644
--- a/apps/postgres-new/components/sidebar/sign-in-dialog.tsx
+++ b/apps/postgres-new/components/sidebar/sign-in-dialog.tsx
@@ -1,3 +1,4 @@
+import ByoLlmButton from '~/components/byo-llm-button'
 import SignInButton from '~/components/sign-in-button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog'
 
@@ -29,8 +30,15 @@ export function SignInDialog({ open, onOpenChange }: SignInDialogProps) {
           database interactions).
         </p>
         <p>We ask you to sign in to prevent API abuse.</p>
-        <div className="flex justify-center items-center my-3">
+        <div className="my-1 border-b" />
+        <div className="flex flex-col gap-2 justify-center items-center my-3">
           <SignInButton />
+          or
+          <ByoLlmButton
+            onClick={() => {
+              onOpenChange(false)
+            }}
+          />
         </div>
       </DialogContent>
     </Dialog>

From 1a727bf86af4128bc4742984fec2525f087388e1 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Wed, 27 Nov 2024 16:57:38 -0700
Subject: [PATCH 21/24] feat: remove live share banner

---
 apps/postgres-new/components/layout.tsx | 89 +------------------------
 1 file changed, 2 insertions(+), 87 deletions(-)

diff --git a/apps/postgres-new/components/layout.tsx b/apps/postgres-new/components/layout.tsx
index 11000a04..06283d37 100644
--- a/apps/postgres-new/components/layout.tsx
+++ b/apps/postgres-new/components/layout.tsx
@@ -3,14 +3,12 @@
 import 'chart.js/auto'
 import 'chartjs-adapter-date-fns'
 
-import { DialogTrigger } from '@radix-ui/react-dialog'
 import { LazyMotion, m } from 'framer-motion'
-import { Loader, MoreVertical } from 'lucide-react'
+import { Loader } from 'lucide-react'
 import Link from 'next/link'
-import { PropsWithChildren, useState } from 'react'
+import { PropsWithChildren } from 'react'
 import { TooltipProvider } from '~/components/ui/tooltip'
 import { useDatabasesQuery } from '~/data/databases/databases-query'
-import { useBreakpoint } from '~/lib/use-breakpoint'
 import {
   currentDomainHostname,
   currentDomainUrl,
@@ -18,7 +16,6 @@ import {
   legacyDomainUrl,
 } from '~/lib/util'
 import { useApp } from './app-provider'
-import { LiveShareIcon } from './live-share-icon'
 import Sidebar from './sidebar'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'
@@ -29,14 +26,12 @@ export type LayoutProps = PropsWithChildren
 
 export default function Layout({ children }: LayoutProps) {
   const { isLegacyDomain, isLegacyDomainRedirect } = useApp()
-  const isSmallBreakpoint = useBreakpoint('lg')
 
   return (
     <LazyMotion features={loadFramerFeatures}>
       <TooltipProvider delayDuration={0}>
         <div className="w-full h-full flex flex-col overflow-hidden">
           <div className="hidden lg:flex flex-col">
-            {!isLegacyDomain && <LiveShareBanner />}
             {(isLegacyDomain || isLegacyDomainRedirect) && <RenameBanner />}
           </div>
           <main className="flex-1 flex flex-col lg:flex-row min-h-0">
@@ -52,86 +47,6 @@ export default function Layout({ children }: LayoutProps) {
   )
 }
 
-function LiveShareBanner() {
-  const [videoLoaded, setVideoLoaded] = useState(false)
-
-  return (
-    <div className="px-3 py-3 flex gap-1 justify-center text-sm text-center bg-neutral-800 text-white">
-      <span>New: Connect to your in-browser databases from outside the browser.</span>
-      <Dialog onOpenChange={() => setVideoLoaded(false)}>
-        <DialogTrigger asChild>
-          <span className="underline cursor-pointer">Learn more.</span>
-        </DialogTrigger>
-        <DialogContent className="max-w-2x max-h-full overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>Introducing Live Share</DialogTitle>
-            <div className="py-2 border-b" />
-          </DialogHeader>
-
-          <div className="prose">
-            <p>
-              With Live Share, you can connect directly to your in-browser PGlite databases from{' '}
-              <em>outside the browser</em>.
-            </p>
-            <div
-              style={{
-                position: 'relative',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              {!videoLoaded && (
-                <div style={{ position: 'absolute', zIndex: 1, color: 'white' }}>
-                  <Loader className="animate-spin" size={36} strokeWidth={0.75} />
-                </div>
-              )}
-              <m.video
-                width="1860"
-                height="1080"
-                variants={{
-                  hidden: { opacity: 0 },
-                  show: { opacity: 1 },
-                }}
-                initial="hidden"
-                animate={videoLoaded ? 'show' : 'hidden'}
-                className="rounded-sm m-0"
-                autoPlay
-                loop
-                onLoadedData={() => setVideoLoaded(true)}
-              >
-                <source
-                  src="https://github.com/user-attachments/assets/78c45f61-4213-49f0-a563-55b426dd6c35"
-                  type="video/mp4"
-                />
-              </m.video>
-            </div>
-
-            <m.div layout className="inline-block">
-              <h4 className="font-bold">How does it work?</h4>
-
-              <ol className="mb-0">
-                <li>
-                  Click on the <MoreVertical size={16} className="text-muted-foreground inline" />{' '}
-                  menu next your database and tap{' '}
-                  <strong>
-                    <LiveShareIcon size={16} className="text-muted-foreground inline" /> Live Share
-                  </strong>
-                </li>
-                <li>A unique connection string will appear for your database</li>
-                <li>
-                  Copy-paste the connection string into any Postgres client (like <code>psql</code>)
-                  and begin querying!
-                </li>
-              </ol>
-            </m.div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}
-
 function RenameBanner() {
   const { setIsRenameDialogOpen } = useApp()
   return (

From 448a7a04467b0e0157834577a4fc83df5cde6366 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Wed, 27 Nov 2024 16:58:13 -0700
Subject: [PATCH 22/24] feat: tool tip over disabled deploy/live share buttons

---
 .../components/sidebar/database-menu-item.tsx | 86 +++++++++++--------
 1 file changed, 50 insertions(+), 36 deletions(-)

diff --git a/apps/postgres-new/components/sidebar/database-menu-item.tsx b/apps/postgres-new/components/sidebar/database-menu-item.tsx
index 9b476423..58fff4c4 100644
--- a/apps/postgres-new/components/sidebar/database-menu-item.tsx
+++ b/apps/postgres-new/components/sidebar/database-menu-item.tsx
@@ -336,26 +336,33 @@ export function DatabaseMenuItem({ database, isActive, onClick }: DatabaseMenuIt
                   <span>Download</span>
                 </DropdownMenuItem>
                 <DropdownMenuSub>
-                  <DropdownMenuSubTrigger
-                    disabled={!user}
-                    className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3 cursor-pointer"
-                    chevronRightClassName="text-muted-foreground"
-                  >
-                    {isDeploying ? (
-                      <Loader2
-                        className="animate-spin flex-shrink-0 text-muted-foreground"
-                        size={16}
-                        strokeWidth={2}
-                      />
-                    ) : (
-                      <Upload
-                        size={16}
-                        strokeWidth={2}
-                        className="flex-shrink-0 text-muted-foreground"
-                      />
-                    )}
-                    <span>Deploy</span>
-                  </DropdownMenuSubTrigger>
+                  <Tooltip>
+                    <TooltipTrigger className="cursor-default">
+                      <DropdownMenuSubTrigger
+                        disabled={!user}
+                        className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3 cursor-pointer"
+                        chevronRightClassName="text-muted-foreground"
+                      >
+                        {isDeploying ? (
+                          <Loader2
+                            className="animate-spin flex-shrink-0 text-muted-foreground"
+                            size={16}
+                            strokeWidth={2}
+                          />
+                        ) : (
+                          <Upload
+                            size={16}
+                            strokeWidth={2}
+                            className="flex-shrink-0 text-muted-foreground"
+                          />
+                        )}
+                        <span>Deploy</span>
+                      </DropdownMenuSubTrigger>
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                      {!user && <TooltipContent side="right">Sign in to deploy</TooltipContent>}
+                    </TooltipPortal>
+                  </Tooltip>
                   <DropdownMenuPortal>
                     <DropdownMenuSubContent>
                       <DropdownMenuItem
@@ -443,21 +450,28 @@ function LiveShareMenuItem(props: ConnectMenuItemProps) {
   }
 
   return (
-    <DropdownMenuItem
-      disabled={props.disabled}
-      className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3"
-      onClick={async (e) => {
-        e.preventDefault()
-        if (liveShare.isLiveSharing) {
-          liveShare.stop()
-        }
-        liveShare.start(props.databaseId)
-        router.push(`/db/${props.databaseId}`)
-        props.onStart?.()
-      }}
-    >
-      <LiveShareIcon size={16} className="flex-shrink-0 text-muted-foreground" />
-      <span>Live Share</span>
-    </DropdownMenuItem>
+    <Tooltip>
+      <TooltipTrigger className="cursor-default">
+        <DropdownMenuItem
+          disabled={props.disabled}
+          className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3"
+          onClick={async (e) => {
+            e.preventDefault()
+            if (liveShare.isLiveSharing) {
+              liveShare.stop()
+            }
+            liveShare.start(props.databaseId)
+            router.push(`/db/${props.databaseId}`)
+            props.onStart?.()
+          }}
+        >
+          <LiveShareIcon size={16} className="flex-shrink-0 text-muted-foreground" />
+          <span>Live Share</span>
+        </DropdownMenuItem>
+      </TooltipTrigger>
+      <TooltipPortal>
+        {!user && <TooltipContent side="right">Sign in to live share</TooltipContent>}
+      </TooltipPortal>
+    </Tooltip>
   )
 }

From 63d0efdc2598dd442a7096c35394c25e07dcfa15 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Thu, 28 Nov 2024 16:16:15 -0700
Subject: [PATCH 23/24] feat: remove unneeded sw activate event

---
 apps/postgres-new/sw.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/postgres-new/sw.ts b/apps/postgres-new/sw.ts
index e7d471be..5b4d3b4b 100644
--- a/apps/postgres-new/sw.ts
+++ b/apps/postgres-new/sw.ts
@@ -54,10 +54,6 @@ async function handleRequest(event: FetchEvent) {
   return fetch(event.request)
 }
 
-self.addEventListener('activate', function (event) {
-  return self.clients.claim()
-})
-
 self.addEventListener('fetch', (event) => {
   event.respondWith(handleRequest(event))
 })

From 66dac4f513449c604bb3be4e9cdecd4ccd728f87 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Thu, 28 Nov 2024 16:20:25 -0700
Subject: [PATCH 24/24] chore: build service worker before dev

---
 apps/postgres-new/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json
index 0c9a5a1d..eb061913 100644
--- a/apps/postgres-new/package.json
+++ b/apps/postgres-new/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "npm run build:sw && next dev",
     "build": "npm run build:sw && next build",
     "build:sw": "vite build",
     "start": "next start",