diff --git a/pkg/api/handlers/threads.go b/pkg/api/handlers/threads.go
index 0dcdc9cc5..a9d43eddf 100644
--- a/pkg/api/handlers/threads.go
+++ b/pkg/api/handlers/threads.go
@@ -230,7 +230,7 @@ func (a *ThreadHandler) Update(req api.Context) error {
 			return err
 		}
 		for _, newTool := range newThread.Tools {
-			if !slices.Contains(agent.Spec.Manifest.AvailableThreadTools, newTool) {
+			if !slices.Contains(agent.Spec.Manifest.AvailableThreadTools, newTool) && !slices.Contains(agent.Spec.Manifest.DefaultThreadTools, newTool) {
 				return types.NewErrBadRequest("tool %s is not available for agent %s", newTool, agent.Name)
 			}
 		}
diff --git a/ui/admin/app/components/agent/ToolEntry.tsx b/ui/admin/app/components/agent/ToolEntry.tsx
index 7e510dfa0..0e76b6184 100644
--- a/ui/admin/app/components/agent/ToolEntry.tsx
+++ b/ui/admin/app/components/agent/ToolEntry.tsx
@@ -14,7 +14,7 @@ export function ToolEntry({
     actions,
 }: {
     tool: string;
-    onDelete: () => void;
+    onDelete?: () => void;
     actions?: React.ReactNode;
 }) {
     const { data: toolReference, isLoading } = useSWR(
@@ -26,7 +26,7 @@ export function ToolEntry({
 
     return (
         <div className="flex items-center space-x-2 justify-between mt-1">
-            <div className="text-sm px-3 shadow-sm rounded-md p-2 w-full flex items-center justify-between gap-2">
+            <div className="text-sm px-3 rounded-md p-2 w-full flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
                     {isLoading ? (
                         <LoadingSpinner className="w-5 h-5" />
@@ -44,14 +44,16 @@ export function ToolEntry({
                 <div className="flex items-center gap-2">
                     {actions}
 
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => onDelete()}
-                    >
-                        <TrashIcon className="w-5 h-5" />
-                    </Button>
+                    {onDelete && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => onDelete()}
+                        >
+                            <TrashIcon className="w-5 h-5" />
+                        </Button>
+                    )}
                 </div>
             </div>
         </div>
diff --git a/ui/admin/app/components/agent/ToolForm.tsx b/ui/admin/app/components/agent/ToolForm.tsx
index 9224fd3cd..0cf6c60ab 100644
--- a/ui/admin/app/components/agent/ToolForm.tsx
+++ b/ui/admin/app/components/agent/ToolForm.tsx
@@ -166,21 +166,23 @@ export function ToolForm({
                             onDelete={() => removeTools([field.tool])}
                             actions={
                                 <Tooltip>
-                                    <TooltipTrigger>
-                                        <Switch
-                                            checked={
-                                                field.variant ===
-                                                ToolVariant.DEFAULT
-                                            }
-                                            onCheckedChange={(checked) =>
-                                                updateVariant(
-                                                    field.tool,
-                                                    checked
-                                                        ? ToolVariant.DEFAULT
-                                                        : ToolVariant.AVAILABLE
-                                                )
-                                            }
-                                        />
+                                    <TooltipTrigger asChild>
+                                        <div>
+                                            <Switch
+                                                checked={
+                                                    field.variant ===
+                                                    ToolVariant.DEFAULT
+                                                }
+                                                onCheckedChange={(checked) =>
+                                                    updateVariant(
+                                                        field.tool,
+                                                        checked
+                                                            ? ToolVariant.DEFAULT
+                                                            : ToolVariant.AVAILABLE
+                                                    )
+                                                }
+                                            />
+                                        </div>
                                     </TooltipTrigger>
 
                                     <TooltipContent>
diff --git a/ui/admin/app/components/chat/Chat.tsx b/ui/admin/app/components/chat/Chat.tsx
index f9d057a4f..8968f0963 100644
--- a/ui/admin/app/components/chat/Chat.tsx
+++ b/ui/admin/app/components/chat/Chat.tsx
@@ -31,7 +31,7 @@ export function Chat({ className }: ChatProps) {
     const showStartButtonPane = mode === "workflow" && !readOnly;
 
     return (
-        <div className={`flex flex-col h-full ${className}`}>
+        <div className={`flex flex-col h-full pb-5 ${className}`}>
             {showMessagePane && (
                 <div className="flex-grow overflow-hidden">
                     <MessagePane
@@ -55,9 +55,7 @@ export function Chat({ className }: ChatProps) {
                             setRunTriggered(true);
                             invoke(params && JSON.stringify(params));
                         }}
-                        className={cn({
-                            "w-full": threadId,
-                        })}
+                        className={cn({ "w-full": threadId })}
                         popoverContentProps={{
                             className: cn({ "translate-y-[-50%]": !threadId }),
                         }}
diff --git a/ui/admin/app/components/chat/ChatActions.tsx b/ui/admin/app/components/chat/ChatActions.tsx
new file mode 100644
index 000000000..7d002bfbc
--- /dev/null
+++ b/ui/admin/app/components/chat/ChatActions.tsx
@@ -0,0 +1,30 @@
+import { cn } from "~/lib/utils";
+
+import { useChat } from "~/components/chat/ChatContext";
+import { ToolsInfo } from "~/components/chat/chat-actions/ToolsInfo";
+import {
+    useOptimisticThread,
+    useThreadAgents as useThreadAgent,
+} from "~/components/chat/thread-helpers";
+
+export function ChatActions({ className }: { className?: string }) {
+    const { threadId } = useChat();
+
+    const { data: agent } = useThreadAgent(threadId);
+    const { thread, updateThread } = useOptimisticThread(threadId);
+
+    const tools = thread?.tools;
+
+    return (
+        <div className={cn("w-full flex items-center", className)}>
+            <div className="flex items-center gap-2">
+                <ToolsInfo
+                    tools={tools ?? []}
+                    onChange={(tools) => updateThread({ tools })}
+                    agent={agent}
+                    disabled={!thread}
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/ui/admin/app/components/chat/Chatbar.tsx b/ui/admin/app/components/chat/Chatbar.tsx
index 46629d5b9..0c2ac75ed 100644
--- a/ui/admin/app/components/chat/Chatbar.tsx
+++ b/ui/admin/app/components/chat/Chatbar.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 
 import { cn } from "~/lib/utils";
 
+import { ChatActions } from "~/components/chat/ChatActions";
 import { useChat } from "~/components/chat/ChatContext";
 import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
 import { Button } from "~/components/ui/button";
@@ -30,11 +31,12 @@ export function Chatbar({ className }: ChatbarProps) {
     return (
         <form
             onSubmit={handleSubmit}
-            className={cn("flex items-end gap-2 pb-10", className)}
+            className={cn("flex items-end gap-2", className)}
         >
             <div className="relative flex-grow">
                 <AutosizeTextarea
-                    className="resize-none rounded-xl h-[2.5rem] line-height-[1.25rem] min-h-[2.5rem] bg-background"
+                    className="rounded-3xl p-2"
+                    variant="flat"
                     value={input}
                     onKeyDown={(e) => {
                         if (e.key === "Enter" && !e.shiftKey) {
@@ -46,17 +48,27 @@ export function Chatbar({ className }: ChatbarProps) {
                     minHeight={0}
                     onChange={(e) => setInput(e.target.value)}
                     placeholder="Type your message..."
+                    bottomContent={
+                        <div className="flex flex-row-reverse items-center justify-between">
+                            <Button
+                                size="icon-sm"
+                                className="m-2"
+                                color="primary"
+                                type="submit"
+                                disabled={!input || isRunning || isInvoking}
+                            >
+                                {isInvoking ? (
+                                    <LoadingSpinner />
+                                ) : (
+                                    <ArrowUpIcon />
+                                )}
+                            </Button>
+
+                            <ChatActions className="p-2" />
+                        </div>
+                    }
                 />
             </div>
-
-            <Button
-                size="icon"
-                className="rounded-full"
-                type="submit"
-                disabled={!input || isRunning || isInvoking}
-            >
-                {isInvoking ? <LoadingSpinner /> : <ArrowUpIcon />}
-            </Button>
         </form>
     );
 }
diff --git a/ui/admin/app/components/chat/chat-actions/FilesInfo.tsx b/ui/admin/app/components/chat/chat-actions/FilesInfo.tsx
new file mode 100644
index 000000000..d18ffdca6
--- /dev/null
+++ b/ui/admin/app/components/chat/chat-actions/FilesInfo.tsx
@@ -0,0 +1,28 @@
+import { PaperclipIcon } from "lucide-react";
+
+import { Button } from "~/components/ui/button";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+export function FilesInfo() {
+    return (
+        <Tooltip>
+            <TooltipContent>Files (Coming Soon)</TooltipContent>
+
+            <TooltipTrigger asChild>
+                <div>
+                    <Button
+                        size="icon-sm"
+                        variant="outline"
+                        className="gap-2"
+                        startContent={<PaperclipIcon />}
+                        disabled
+                    />
+                </div>
+            </TooltipTrigger>
+        </Tooltip>
+    );
+}
diff --git a/ui/admin/app/components/chat/chat-actions/KnowledgeInfo.tsx b/ui/admin/app/components/chat/chat-actions/KnowledgeInfo.tsx
new file mode 100644
index 000000000..80a8c8b87
--- /dev/null
+++ b/ui/admin/app/components/chat/chat-actions/KnowledgeInfo.tsx
@@ -0,0 +1,63 @@
+import { LibraryIcon } from "lucide-react";
+
+import { KnowledgeFile } from "~/lib/model/knowledge";
+import { cn } from "~/lib/utils";
+
+import { TypographyMuted } from "~/components/Typography";
+import { Button } from "~/components/ui/button";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "~/components/ui/popover";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+export function KnowledgeInfo({
+    knowledge,
+    className,
+    disabled,
+}: {
+    knowledge: KnowledgeFile[];
+    className?: string;
+    disabled?: boolean;
+}) {
+    return (
+        <Tooltip>
+            <TooltipContent>Knowledge</TooltipContent>
+
+            <Popover>
+                <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                        <Button
+                            size="icon-sm"
+                            variant="outline"
+                            className={cn("gap-2", className)}
+                            startContent={<LibraryIcon />}
+                            disabled={disabled}
+                        />
+                    </PopoverTrigger>
+                </TooltipTrigger>
+
+                <PopoverContent>
+                    {knowledge.length > 0 ? (
+                        <div className="space-y-2">
+                            {knowledge.map((file) => (
+                                <TypographyMuted key={file.id}>
+                                    {file.fileName}
+                                </TypographyMuted>
+                            ))}
+                        </div>
+                    ) : (
+                        <TypographyMuted>
+                            No knowledge available
+                        </TypographyMuted>
+                    )}
+                </PopoverContent>
+            </Popover>
+        </Tooltip>
+    );
+}
diff --git a/ui/admin/app/components/chat/chat-actions/TablesInfo.tsx b/ui/admin/app/components/chat/chat-actions/TablesInfo.tsx
new file mode 100644
index 000000000..081981238
--- /dev/null
+++ b/ui/admin/app/components/chat/chat-actions/TablesInfo.tsx
@@ -0,0 +1,28 @@
+import { TableIcon } from "lucide-react";
+
+import { Button } from "~/components/ui/button";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+export function TablesInfo() {
+    return (
+        <Tooltip>
+            <TooltipContent>Tables (Coming Soon)</TooltipContent>
+
+            <TooltipTrigger asChild>
+                <div>
+                    <Button
+                        size="icon-sm"
+                        variant="outline"
+                        className="gap-2"
+                        startContent={<TableIcon />}
+                        disabled
+                    />
+                </div>
+            </TooltipTrigger>
+        </Tooltip>
+    );
+}
diff --git a/ui/admin/app/components/chat/chat-actions/ToolsInfo.tsx b/ui/admin/app/components/chat/chat-actions/ToolsInfo.tsx
new file mode 100644
index 000000000..606035550
--- /dev/null
+++ b/ui/admin/app/components/chat/chat-actions/ToolsInfo.tsx
@@ -0,0 +1,128 @@
+import { WrenchIcon } from "lucide-react";
+import { useMemo } from "react";
+
+import { Agent } from "~/lib/model/agents";
+import { cn } from "~/lib/utils";
+
+import { TypographyMuted, TypographySmall } from "~/components/Typography";
+import { ToolEntry } from "~/components/agent/ToolEntry";
+import { Button } from "~/components/ui/button";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "~/components/ui/popover";
+import { Switch } from "~/components/ui/switch";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+type ToolItem = {
+    tool: string;
+    isToggleable: boolean;
+    isEnabled: boolean;
+};
+
+export function ToolsInfo({
+    tools,
+    className,
+    agent,
+    disabled,
+    onChange,
+}: {
+    tools: string[];
+    className?: string;
+    agent: Nullish<Agent>;
+    disabled?: boolean;
+    onChange: (tools: string[]) => void;
+}) {
+    const toolItems = useMemo<ToolItem[]>(() => {
+        if (!agent)
+            return tools.map((tool) => ({
+                tool,
+                isToggleable: false,
+                isEnabled: true,
+            }));
+
+        const agentTools = (agent.tools ?? []).map((tool) => ({
+            tool,
+            isToggleable: false,
+            isEnabled: true,
+        }));
+
+        const { defaultThreadTools, availableThreadTools } = agent ?? {};
+
+        const toggleableTools = [
+            ...(defaultThreadTools ?? []),
+            ...(availableThreadTools ?? []),
+        ].map((tool) => ({
+            tool,
+            isToggleable: true,
+            isEnabled: tools.includes(tool),
+        }));
+
+        return [...agentTools, ...toggleableTools];
+    }, [tools, agent]);
+
+    const handleToggleTool = (tool: string, checked: boolean) => {
+        onChange(checked ? [...tools, tool] : tools.filter((t) => t !== tool));
+    };
+
+    return (
+        <Tooltip>
+            <TooltipContent>Tools</TooltipContent>
+
+            <Popover>
+                <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                        <Button
+                            size="icon-sm"
+                            variant="outline"
+                            className={cn("gap-2", className)}
+                            startContent={<WrenchIcon />}
+                            disabled={disabled}
+                        />
+                    </PopoverTrigger>
+                </TooltipTrigger>
+
+                <PopoverContent className="w-80" align="start">
+                    {toolItems.length > 0 ? (
+                        <div className="space-y-2">
+                            <TypographySmall className="font-semibold">
+                                Available Tools
+                            </TypographySmall>
+                            <div className="space-y-1">
+                                {toolItems.map(renderToolItem)}
+                            </div>
+                        </div>
+                    ) : (
+                        <TypographyMuted>No tools available</TypographyMuted>
+                    )}
+                </PopoverContent>
+            </Popover>
+        </Tooltip>
+    );
+
+    function renderToolItem({ isEnabled, isToggleable, tool }: ToolItem) {
+        return (
+            <ToolEntry
+                key={tool}
+                tool={tool}
+                actions={
+                    isToggleable ? (
+                        <Switch
+                            checked={isEnabled}
+                            onCheckedChange={(checked) =>
+                                handleToggleTool(tool, checked)
+                            }
+                        />
+                    ) : (
+                        <TypographyMuted>On</TypographyMuted>
+                    )
+                }
+            />
+        );
+    }
+}
diff --git a/ui/admin/app/components/chat/thread-helpers.ts b/ui/admin/app/components/chat/thread-helpers.ts
new file mode 100644
index 000000000..4949e76e9
--- /dev/null
+++ b/ui/admin/app/components/chat/thread-helpers.ts
@@ -0,0 +1,58 @@
+import { toast } from "sonner";
+import useSWR from "swr";
+
+import { UpdateThread } from "~/lib/model/threads";
+import { AgentService } from "~/lib/service/api/agentService";
+import { ThreadsService } from "~/lib/service/api/threadsService";
+
+import { useAsync } from "~/hooks/useAsync";
+
+function useThread(threadId?: Nullish<string>) {
+    return useSWR(ThreadsService.getThreadById.key(threadId), ({ threadId }) =>
+        ThreadsService.getThreadById(threadId)
+    );
+}
+
+export function useOptimisticThread(threadId?: Nullish<string>) {
+    const { data: thread, mutate } = useThread(threadId);
+
+    const handleUpdateThread = useAsync(ThreadsService.updateThreadById);
+
+    const updateThread = async (updates: Partial<UpdateThread>) => {
+        if (!thread) return;
+
+        const updatedThread = { ...thread, ...updates };
+
+        // optimistic update
+        mutate((thread) => (thread ? updatedThread : thread), false);
+
+        const { error, data } = await handleUpdateThread.executeAsync(
+            thread.id,
+            updatedThread
+        );
+
+        if (data) return;
+
+        if (error instanceof Error) toast.error(error.message);
+
+        // revert optimistic update
+        mutate(thread);
+    };
+
+    return { thread, updateThread };
+}
+
+export function useThreadKnowledge(threadId?: Nullish<string>) {
+    return useSWR(ThreadsService.getKnowledge.key(threadId), ({ threadId }) =>
+        ThreadsService.getKnowledge(threadId)
+    );
+}
+
+export function useThreadAgents(threadId?: Nullish<string>) {
+    const { data: thread } = useThread(threadId);
+
+    return useSWR(
+        AgentService.getAgentById.key(thread?.agentID),
+        ({ agentId }) => AgentService.getAgentById(agentId)
+    );
+}
diff --git a/ui/admin/app/components/ui/button.tsx b/ui/admin/app/components/ui/button.tsx
index 79e0f8e22..6cc017ced 100644
--- a/ui/admin/app/components/ui/button.tsx
+++ b/ui/admin/app/components/ui/button.tsx
@@ -11,7 +11,7 @@ const buttonVariants = cva(
         variants: {
             variant: {
                 default:
-                    "bg-primary text-primary-foreground shadow hover:bg-primary/80",
+                    "bg-primary text-primary-foreground shadow hover:bg-primary/80 focus-visible:ring-foreground",
                 destructive:
                     "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
                 outline:
@@ -29,6 +29,7 @@ const buttonVariants = cva(
                 sm: "h-8 px-3 text-xs",
                 lg: "h-10 px-8",
                 icon: "h-9 w-9 min-w-9 min-h-9 [&_svg]:size-[1.375rem]",
+                "icon-sm": "h-8 w-8 min-w-8 min-h-8 [&_svg]:size-[1.125rem]",
             },
             shape: {
                 none: "",
diff --git a/ui/admin/app/components/ui/textarea.tsx b/ui/admin/app/components/ui/textarea.tsx
index 0e4b4c74e..6b35c544a 100644
--- a/ui/admin/app/components/ui/textarea.tsx
+++ b/ui/admin/app/components/ui/textarea.tsx
@@ -1,16 +1,49 @@
+import { VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
-import { useImperativeHandle } from "react";
+import { forwardRef, useImperativeHandle } from "react";
 
 import { cn } from "~/lib/utils";
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+const textareaVariants = cva(
+    "flex w-full rounded-md bg-transparent text-sm placeholder:text-muted-foreground has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring group group-disabled:cursor-not-allowed group-disabled:bg-opacity-50",
+    {
+        variants: {
+            variant: {
+                outlined: "border border-input shadow-sm",
+                flat: "border-none shadow-none bg-muted",
+            },
+        },
+        defaultVariants: {
+            variant: "outlined",
+        },
+    }
+);
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-    ({ className, ...props }, ref) => {
+type TextAreaWrapperProps = React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof textareaVariants>;
+const TextAreaWrapper = forwardRef<HTMLDivElement, TextAreaWrapperProps>(
+    ({ className, variant, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cn(textareaVariants({ variant, className }))}
+                {...props}
+            />
+        );
+    }
+);
+TextAreaWrapper.displayName = "TextAreaWrapper";
+
+type TextAreaBaseProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+    VariantProps<typeof textareaVariants>;
+
+const TextAreaBase = forwardRef<HTMLTextAreaElement, TextAreaBaseProps>(
+    ({ className, variant, ...props }, ref) => {
         return (
             <textarea
                 className={cn(
-                    "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    "w-full px-3 py-2 bg-transparent border-none focus-visible:border-none focus-visible:outline-none disabled:group group-disabled:cursor-not-allowed",
+                    variant === "flat" && "placeholder:text-muted-foreground",
                     className
                 )}
                 ref={ref}
@@ -19,6 +52,49 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         );
     }
 );
+TextAreaBase.displayName = "TextAreaBase";
+
+export type TextareaProps = TextAreaBaseProps &
+    VariantProps<typeof textareaVariants> & {
+        resizeable?: boolean;
+        endContent?: React.ReactNode;
+        bottomContent?: React.ReactNode;
+    };
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    (
+        {
+            className,
+            resizeable = false,
+            variant,
+            endContent,
+            bottomContent,
+            ...props
+        },
+        ref
+    ) => {
+        return (
+            <TextAreaWrapper
+                variant={variant}
+                className={cn("flex flex-col", className)}
+            >
+                <div className="w-full flex">
+                    <TextAreaBase
+                        className={cn(
+                            "w-full px-3 py-2 bg-transparent border-none focus-visible:border-none focus-visible:outline-none",
+                            !resizeable && "resize-none"
+                        )}
+                        variant={variant}
+                        ref={ref}
+                        {...props}
+                    />
+                    {endContent}
+                </div>
+                {bottomContent}
+            </TextAreaWrapper>
+        );
+    }
+);
 Textarea.displayName = "Textarea";
 
 // note(ryanhopperlowe): AutosizeTextarea taken from (https://shadcnui-expansions.typeart.cc/docs/autosize-textarea)
@@ -27,39 +103,61 @@ interface UseAutosizeTextAreaProps {
     textAreaRef: HTMLTextAreaElement | null;
     minHeight?: number;
     maxHeight?: number;
-    triggerAutoSize: string;
 }
 
 const useAutosizeTextArea = ({
     textAreaRef,
-    triggerAutoSize,
     maxHeight = Number.MAX_SAFE_INTEGER,
     minHeight = 0,
 }: UseAutosizeTextAreaProps) => {
     const [init, setInit] = React.useState(true);
-    React.useEffect(() => {
-        // We need to reset the height momentarily to get the correct scrollHeight for the textarea
-        const offsetBorder = 2;
-        if (textAreaRef) {
+
+    const resize = React.useCallback(
+        (node: HTMLTextAreaElement) => {
+            // Reset the height to auto to get the correct scrollHeight
+            node.style.height = "auto";
+
+            const offsetBorder = 2;
+
             if (init) {
-                textAreaRef.style.minHeight = `${minHeight + offsetBorder}px`;
+                node.style.minHeight = `${minHeight + offsetBorder}px`;
                 if (maxHeight > minHeight) {
-                    textAreaRef.style.maxHeight = `${maxHeight}px`;
+                    node.style.maxHeight = `${maxHeight}px`;
                 }
+                node.style.height = `${minHeight + offsetBorder}px`;
                 setInit(false);
             }
-            textAreaRef.style.height = `${minHeight + offsetBorder}px`;
-            const scrollHeight = textAreaRef.scrollHeight;
-            // We then set the height directly, outside of the render loop
-            // Trying to set this with state or a ref will product an incorrect value.
-            if (scrollHeight > maxHeight) {
-                textAreaRef.style.height = `${maxHeight}px`;
-            } else {
-                textAreaRef.style.height = `${scrollHeight + offsetBorder}px`;
-            }
-        }
+
+            node.style.height = `${
+                Math.min(Math.max(node.scrollHeight, minHeight), maxHeight) +
+                offsetBorder
+            }px`;
+        },
+        // disable exhaustive deps because we don't want to rerun this after init is set to false
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [textAreaRef, triggerAutoSize]);
+        [maxHeight, minHeight]
+    );
+
+    const initResizer = React.useCallback(
+        (node: HTMLTextAreaElement) => {
+            node.onkeyup = () => resize(node);
+            node.onfocus = () => resize(node);
+            node.oninput = () => resize(node);
+            node.onresize = () => resize(node);
+            node.onchange = () => resize(node);
+            resize(node);
+        },
+        [resize]
+    );
+
+    React.useEffect(() => {
+        if (textAreaRef) {
+            initResizer(textAreaRef);
+            resize(textAreaRef);
+        }
+    }, [resize, initResizer, textAreaRef]);
+
+    return { initResizer };
 };
 
 export type AutosizeTextAreaRef = {
@@ -68,10 +166,10 @@ export type AutosizeTextAreaRef = {
     minHeight: number;
 };
 
-export type AutosizeTextAreaProps = {
+export type AutosizeTextAreaProps = TextareaProps & {
     maxHeight?: number;
     minHeight?: number;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+};
 
 const AutosizeTextarea = React.forwardRef<
     AutosizeTextAreaRef,
@@ -83,42 +181,42 @@ const AutosizeTextarea = React.forwardRef<
             minHeight = 52,
             className,
             onChange,
-            value,
             ...props
         }: AutosizeTextAreaProps,
         ref: React.Ref<AutosizeTextAreaRef>
     ) => {
         const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
-        const [triggerAutoSize, setTriggerAutoSize] = React.useState("");
-
-        useAutosizeTextArea({
-            textAreaRef: textAreaRef.current,
-            triggerAutoSize: triggerAutoSize,
-            maxHeight,
-            minHeight,
-        });
 
         useImperativeHandle(ref, () => ({
             textArea: textAreaRef.current as HTMLTextAreaElement,
-            focus: () => textAreaRef?.current?.focus(),
+            focus: textAreaRef?.current?.focus,
             maxHeight,
             minHeight,
         }));
 
-        React.useEffect(() => {
-            setTriggerAutoSize(value as string);
-        }, [props?.defaultValue, value]);
+        const { initResizer } = useAutosizeTextArea({
+            textAreaRef: textAreaRef.current,
+            maxHeight,
+            minHeight,
+        });
+
+        const initRef = React.useCallback(
+            (node: HTMLTextAreaElement | null) => {
+                textAreaRef.current = node;
+
+                if (!node) return;
+
+                initResizer(node);
+            },
+            [initResizer]
+        );
 
         return (
             <Textarea
                 {...props}
-                value={value}
-                ref={textAreaRef}
-                className={cn(className)}
-                onChange={(e) => {
-                    setTriggerAutoSize(e.target.value);
-                    onChange?.(e);
-                }}
+                ref={initRef}
+                className={cn("resize-none", className)}
+                onChange={onChange}
             />
         );
     }
diff --git a/ui/admin/app/lib/model/agents.ts b/ui/admin/app/lib/model/agents.ts
index 0d734ff65..204eefe99 100644
--- a/ui/admin/app/lib/model/agents.ts
+++ b/ui/admin/app/lib/model/agents.ts
@@ -14,7 +14,7 @@ export type AgentBase = {
     workflows?: string[];
     tools?: string[];
     defaultThreadTools?: string[];
-    availableThreadTools?: string[];
+    availableThreadTools?: Nullish<string[]>;
     params?: Record<string, string>;
     knowledgeDescription?: string;
     model?: string;
diff --git a/ui/admin/app/lib/model/threads.ts b/ui/admin/app/lib/model/threads.ts
index 77e688855..a9eaec468 100644
--- a/ui/admin/app/lib/model/threads.ts
+++ b/ui/admin/app/lib/model/threads.ts
@@ -18,3 +18,5 @@ export type Thread = EntityMeta &
         | { agentID: string; workflowID?: never }
         | { agentID?: never; workflowID: string }
     );
+
+export type UpdateThread = ThreadBase;
diff --git a/ui/admin/app/lib/routers/apiRoutes.ts b/ui/admin/app/lib/routers/apiRoutes.ts
index 3dca67e91..119052809 100644
--- a/ui/admin/app/lib/routers/apiRoutes.ts
+++ b/ui/admin/app/lib/routers/apiRoutes.ts
@@ -115,6 +115,7 @@ export const ApiRoutes = {
     threads: {
         base: () => buildUrl("/threads"),
         getById: (threadId: string) => buildUrl(`/threads/${threadId}`),
+        updateById: (threadId: string) => buildUrl(`/threads/${threadId}`),
         getByAgent: (agentId: string) => buildUrl(`/agents/${agentId}/threads`),
         events: (
             threadId: string,
diff --git a/ui/admin/app/lib/service/api/threadsService.ts b/ui/admin/app/lib/service/api/threadsService.ts
index 346d4b032..da99c59bb 100644
--- a/ui/admin/app/lib/service/api/threadsService.ts
+++ b/ui/admin/app/lib/service/api/threadsService.ts
@@ -1,6 +1,6 @@
 import { ChatEvent } from "~/lib/model/chatEvents";
 import { KnowledgeFile } from "~/lib/model/knowledge";
-import { Thread } from "~/lib/model/threads";
+import { Thread, UpdateThread } from "~/lib/model/threads";
 import { WorkspaceFile } from "~/lib/model/workspace";
 import { ApiRoutes, revalidateWhere } from "~/lib/routers/apiRoutes";
 import { request } from "~/lib/service/api/primitives";
@@ -29,6 +29,17 @@ getThreadById.key = (threadId?: Nullish<string>) => {
     return { url: ApiRoutes.threads.getById(threadId).path, threadId };
 };
 
+const updateThreadById = async (threadId: string, thread: UpdateThread) => {
+    const { data } = await request<Thread>({
+        url: ApiRoutes.threads.updateById(threadId).url,
+        method: "PUT",
+        data: thread,
+        errorMessage: "Failed to update thread",
+    });
+
+    return data;
+};
+
 const getThreadsByAgent = async (agentId: string) => {
     const res = await request<{ items: Thread[] }>({
         url: ApiRoutes.threads.getByAgent(agentId).url,
@@ -125,6 +136,7 @@ export const ThreadsService = {
     getThreadsByAgent,
     getThreadEvents,
     getThreadEventSource,
+    updateThreadById,
     deleteThread,
     revalidateThreads,
     getKnowledge,