From 3692e63c85e1170734bf91fa981a8553e89f238d Mon Sep 17 00:00:00 2001
From: Raphael Frank <04.raphael.frank@gmail.com>
Date: Wed, 8 Jul 2026 23:57:52 +0200
Subject: [PATCH] add toggle for useLocalLLM

---
 web-client/src/components/ui/switch.tsx       | 31 +++++++++++++++++++
 web-client/src/features/helper/api/queries.ts | 18 +++++++----
 .../helper/model/useReportViewModel.ts        |  2 +-
 .../src/features/helper/pages/HelperPage.tsx  | 24 +++++++++++---
 4 files changed, 64 insertions(+), 11 deletions(-)
 create mode 100644 web-client/src/components/ui/switch.tsx

diff --git a/web-client/src/components/ui/switch.tsx b/web-client/src/components/ui/switch.tsx
new file mode 100644
index 00000000..51edbdce
--- /dev/null
+++ b/web-client/src/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-none border transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8.25 data-[size=sm]:h-3.5 data-[size=sm]:w-6.25 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-unchecked:border-input/50 data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block bg-background ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-checked:translate-x-[calc(100%+2px)] dark:data-checked:bg-primary-foreground data-unchecked:translate-x-0.25 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/web-client/src/features/helper/api/queries.ts b/web-client/src/features/helper/api/queries.ts
index dae3c894..1d720d26 100644
--- a/web-client/src/features/helper/api/queries.ts
+++ b/web-client/src/features/helper/api/queries.ts
@@ -44,15 +44,18 @@ export function useHelperHello() {
 export function useGenerateMemberReport(memberId: string) {
   const qc = useQueryClient()
 
-  return useMutation<void, Error, void>({
-    mutationFn: () =>
+  return useMutation<void, Error, boolean | undefined>({
+    mutationFn: (useLocal) =>
       mockOr(
         () => {
           if (!scopeReport(memberId, getCurrentUser())) throw new Error('Report not allowed')
           mockGenerateMemberReport(memberId)
           return Promise.resolve()
         },
-        () => helperClient.post(`/reports/member/${memberId}`).then(() => undefined),
+        () =>
+          helperClient
+            .post(`/reports/member/${memberId}`, { uselocal: useLocal })
+            .then(() => undefined),
       ),
     onSuccess: () => qc.invalidateQueries({ queryKey: helperKeys.memberReports(memberId) }),
   })
@@ -61,15 +64,18 @@ export function useGenerateMemberReport(memberId: string) {
 export function useGenerateTeamReport(teamId: string) {
   const qc = useQueryClient()
 
-  return useMutation<void, Error, void>({
-    mutationFn: () =>
+  return useMutation<void, Error, boolean | undefined>({
+    mutationFn: (useLocal) =>
       mockOr(
         () => {
           if (!scopeTeamReport(teamId, getCurrentUser())) throw new Error('Report not allowed')
           mockGenerateTeamReport(teamId)
           return Promise.resolve()
         },
-        () => helperClient.post(`/reports/team/${teamId}`).then(() => undefined),
+        () =>
+          helperClient
+            .post(`/reports/team/${teamId}`, { uselocal: useLocal })
+            .then(() => undefined),
       ),
     onSuccess: () => qc.invalidateQueries({ queryKey: helperKeys.teamReports(teamId) }),
   })
diff --git a/web-client/src/features/helper/model/useReportViewModel.ts b/web-client/src/features/helper/model/useReportViewModel.ts
index 445d7b4e..4946ac85 100644
--- a/web-client/src/features/helper/model/useReportViewModel.ts
+++ b/web-client/src/features/helper/model/useReportViewModel.ts
@@ -76,7 +76,7 @@ export function useReportViewModel() {
     rows,
     isLoading: (isTrainer && teamsQuery.isLoading) || query.isLoading,
     isError: query.isError,
-    generate: () => generate.mutate(),
+    generate: (useLocal?: boolean) => generate.mutate(useLocal),
     isGenerating: generate.isPending,
     generateError: generate.error,
     listKey,
diff --git a/web-client/src/features/helper/pages/HelperPage.tsx b/web-client/src/features/helper/pages/HelperPage.tsx
index d72bb279..e5add051 100644
--- a/web-client/src/features/helper/pages/HelperPage.tsx
+++ b/web-client/src/features/helper/pages/HelperPage.tsx
@@ -13,6 +13,7 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
 import { PageHeader } from '@/components/ui/page-header'
 import { RowActionButton, RowActions } from '@/components/ui/row-action-button'
 import { Separator } from '@/components/ui/separator'
@@ -23,6 +24,7 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Switch } from '@/components/ui/switch'
 import { serverErrorMessage } from '@/lib/server-error'
 import { useHelperUiStore } from '../model/helperUiStore'
 import {
@@ -54,10 +56,11 @@ export function HelperPage() {
   const [generated, setGenerated] = useState(false)
   const [deleteError, setDeleteError] = useState<string | null>(null)
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
+  const [useLocalLlm, setUseLocalLlm] = useState(false)
 
   const onGenerate = () => {
     setGenerated(false)
-    generate()
+    generate(useLocalLlm)
     // The result is async (the POST returns 202 with no body); confirm we kicked it off.
     setGenerated(true)
   }
@@ -116,9 +119,22 @@ export function HelperPage() {
                 <p className="text-body-sm text-destructive">{generateError.message}</p>
               )}
             </div>
-            <Button onClick={onGenerate} disabled={isGenerating}>
-              {isGenerating ? 'Starting…' : 'Generate report'}
-            </Button>
+            <div className="flex shrink-0 items-center gap-3">
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="use-local-llm"
+                  checked={useLocalLlm}
+                  onCheckedChange={setUseLocalLlm}
+                  disabled={isGenerating}
+                />
+                <Label htmlFor="use-local-llm" className="text-body-sm text-text-secondary">
+                  Use local LLM
+                </Label>
+              </div>
+              <Button onClick={onGenerate} disabled={isGenerating}>
+                {isGenerating ? 'Starting…' : 'Generate report'}
+              </Button>
+            </div>
           </div>
 
           <Separator />