Merge branch 'main' into set-header

client/src/components/Sidebar.tsx

@@ -447,7 +447,13 @@ const Sidebar = ({
           <div className="space-y-2">
             {connectionStatus === "connected" && (
               <div className="grid grid-cols-2 gap-4">
-                <Button data-testid="connect-button" onClick={onConnect}>
+                <Button
+                  data-testid="connect-button"
+                  onClick={() => {
+                    onDisconnect();
+                    onConnect();
+                  }}
+                >
                   <RotateCcw className="w-4 h-4 mr-2" />
                   {transportType === "stdio" ? "Restart" : "Reconnect"}
                 </Button>

client/src/components/ui/button.tsx

@@ -54,4 +54,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+export { Button };

client/src/components/ui/input.tsx

@@ -2,8 +2,7 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface InputProps
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

client/src/components/ui/textarea.tsx

@@ -2,8 +2,7 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface TextareaProps
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {

client/src/hooks/use-toast.ts

@@ -15,13 +15,6 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement;
 };
 
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
 let count = 0;
 
 function genId() {
@@ -29,23 +22,28 @@ function genId() {
   return count.toString();
 }
 
-type ActionType = typeof actionTypes;
+const enum ActionType {
+  ADD_TOAST = "ADD_TOAST",
+  UPDATE_TOAST = "UPDATE_TOAST",
+  DISMISS_TOAST = "DISMISS_TOAST",
+  REMOVE_TOAST = "REMOVE_TOAST",
+}
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"];
+      type: ActionType.ADD_TOAST;
       toast: ToasterToast;
     }
   | {
-      type: ActionType["UPDATE_TOAST"];
+      type: ActionType.UPDATE_TOAST;
       toast: Partial<ToasterToast>;
     }
   | {
-      type: ActionType["DISMISS_TOAST"];
+      type: ActionType.DISMISS_TOAST;
       toastId?: ToasterToast["id"];
     }
   | {
-      type: ActionType["REMOVE_TOAST"];
+      type: ActionType.REMOVE_TOAST;
       toastId?: ToasterToast["id"];
     };
 
@@ -63,7 +61,7 @@ const addToRemoveQueue = (toastId: string) => {
   const timeout = setTimeout(() => {
     toastTimeouts.delete(toastId);
     dispatch({
-      type: "REMOVE_TOAST",
+      type: ActionType.REMOVE_TOAST,
       toastId: toastId,
     });
   }, TOAST_REMOVE_DELAY);
@@ -73,13 +71,13 @@ const addToRemoveQueue = (toastId: string) => {
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
-    case "ADD_TOAST":
+    case ActionType.ADD_TOAST:
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
       };
 
-    case "UPDATE_TOAST":
+    case ActionType.UPDATE_TOAST:
       return {
         ...state,
         toasts: state.toasts.map((t) =>
@@ -87,7 +85,7 @@ export const reducer = (state: State, action: Action): State => {
         ),
       };
 
-    case "DISMISS_TOAST": {
+    case ActionType.DISMISS_TOAST: {
       const { toastId } = action;
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
@@ -112,7 +110,7 @@ export const reducer = (state: State, action: Action): State => {
         ),
       };
     }
-    case "REMOVE_TOAST":
+    case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
         return {
           ...state,
@@ -144,13 +142,14 @@ function toast({ ...props }: Toast) {
 
   const update = (props: ToasterToast) =>
     dispatch({
-      type: "UPDATE_TOAST",
+      type: ActionType.UPDATE_TOAST,
       toast: { ...props, id },
     });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  const dismiss = () =>
+    dispatch({ type: ActionType.DISMISS_TOAST, toastId: id });
 
   dispatch({
-    type: "ADD_TOAST",
+    type: ActionType.ADD_TOAST,
     toast: {
       ...props,
       id,
@@ -184,7 +183,8 @@ function useToast() {
   return {
     ...state,
     toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+    dismiss: (toastId?: string) =>
+      dispatch({ type: ActionType.DISMISS_TOAST, toastId }),
   };
 }
 

client/src/lib/hooks/useCompletionState.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import {
   ResourceReference,
   PromptReference,
@@ -15,9 +15,11 @@ function debounce<T extends (...args: any[]) => PromiseLike<void>>(
   wait: number,
 ): (...args: Parameters<T>) => void {
   let timeout: ReturnType<typeof setTimeout>;
-  return function (...args: Parameters<T>) {
+  return (...args: Parameters<T>) => {
     clearTimeout(timeout);
-    timeout = setTimeout(() => func(...args), wait);
+    timeout = setTimeout(() => {
+      void func(...args);
+    }, wait);
   };
 }
 
@@ -58,8 +60,8 @@ export function useCompletionState(
     });
   }, [cleanup]);
 
-  const requestCompletions = useCallback(
+  const requestCompletions = useMemo(() => {
-    debounce(
+    return debounce(
       async (
         ref: ResourceReference | PromptReference,
         argName: string,
@@ -94,7 +96,7 @@ export function useCompletionState(
               loading: { ...prev.loading, [argName]: false },
             }));
           }
-        } catch (err) {
+        } catch {
           if (!abortController.signal.aborted) {
             setState((prev) => ({
               ...prev,
@@ -108,9 +110,8 @@ export function useCompletionState(
         }
       },
       debounceMs,
-    ),
+    );
-    [handleCompletion, completionsSupported, cleanup, debounceMs],
+  }, [handleCompletion, completionsSupported, cleanup, debounceMs]);
-  );
 
   // Clear completions when support status changes
   useEffect(() => {

client/src/lib/useTheme.ts

@@ -43,7 +43,10 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
       document.documentElement.classList.toggle("dark", newTheme === "dark");
     }
   }, []);
-  return useMemo(() => [theme, setThemeWithSideEffect], [theme]);
+  return useMemo(
+    () => [theme, setThemeWithSideEffect],
+    [theme, setThemeWithSideEffect],
+  );
 };
 
 export default useTheme;