From 043d1c8cb83a8871709ef4ea46238625194d608e Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <46546486+ryanhopperlowe@users.noreply.github.com>
Date: Fri, 22 Nov 2024 17:12:45 -0600
Subject: [PATCH] Admin Theme Redesign (#666)

* feat: update admin ui theming

Signed-off-by: Ryan Hopper-Lowe <ryan@acorn.io>

* feat: theme touch ups to buttons/links

* fix: make auth prompt CTAs more apparent in chat

---------

Signed-off-by: Ryan Hopper-Lowe <ryan@acorn.io>
---
 ui/admin/app/components/Typography.tsx        |   2 +-
 ui/admin/app/components/agent/Agent.tsx       |  47 +++--
 ui/admin/app/components/agent/PastThreads.tsx |   6 +-
 ui/admin/app/components/agent/ToolEntry.tsx   |   4 +-
 ui/admin/app/components/chat/Chatbar.tsx      |   7 +-
 ui/admin/app/components/chat/Message.tsx      |  23 +-
 ui/admin/app/components/chat/NoMessages.tsx   |   9 +-
 ui/admin/app/components/composed/CopyText.tsx |   2 +-
 .../app/components/composed/DataTable.tsx     |   4 +-
 ui/admin/app/components/header/HeaderNav.tsx  |   2 +-
 .../knowledge/AgentKnowledgePanel.tsx         |   2 +-
 .../components/oauth-apps/OAuthAppTile.tsx    |   4 +-
 .../oauth-apps/custom/CustomOAuthAppForm.tsx  |   2 +-
 ui/admin/app/components/sidebar/Sidebar.tsx   |   5 +-
 ui/admin/app/components/thread/ThreadMeta.tsx |   2 +-
 ui/admin/app/components/tools/CreateTool.tsx  |   6 +-
 ui/admin/app/components/tools/ToolCatalog.tsx |   2 +-
 .../components/tools/toolGrid/ToolCard.tsx    |   7 +-
 ui/admin/app/components/ui/badge.tsx          |   2 +-
 ui/admin/app/components/ui/button.tsx         |  17 +-
 ui/admin/app/components/ui/card.tsx           |   5 +-
 ui/admin/app/components/ui/link.tsx           |   2 +-
 ui/admin/app/components/ui/sidebar.tsx        |   2 +-
 ui/admin/app/components/ui/table.tsx          |   2 +-
 .../app/components/workflow/steps/Step.tsx    |   4 +-
 ui/admin/app/lib/model/runs.ts                |   2 +-
 ui/admin/app/routes/_auth.agents.$agent.tsx   |   2 +-
 ui/admin/app/routes/_auth.threads.tsx         |   2 +-
 ui/admin/app/routes/_auth.tools._index.tsx    |   5 +-
 ui/admin/app/tailwind.css                     | 199 +++++++++++-------
 ui/admin/tailwind.config.ts                   |  15 +-
 31 files changed, 225 insertions(+), 170 deletions(-)

diff --git a/ui/admin/app/components/Typography.tsx b/ui/admin/app/components/Typography.tsx
index 37ca4391..fcac44c1 100644
--- a/ui/admin/app/components/Typography.tsx
+++ b/ui/admin/app/components/Typography.tsx
@@ -99,7 +99,7 @@ export function TypographyPAccent({
     ...props
 }: TypographyProps<"p">) {
     return (
-        <TypographyP className={cn(`text-info-muted`, className)} {...props}>
+        <TypographyP className={cn(`text-secondary`, className)} {...props}>
             {children}
         </TypographyP>
     );
diff --git a/ui/admin/app/components/agent/Agent.tsx b/ui/admin/app/components/agent/Agent.tsx
index 4eb265ec..ec58fde9 100644
--- a/ui/admin/app/components/agent/Agent.tsx
+++ b/ui/admin/app/components/agent/Agent.tsx
@@ -12,7 +12,7 @@ import { PastThreads } from "~/components/agent/PastThreads";
 import { ToolForm } from "~/components/agent/ToolForm";
 import { AgentKnowledgePanel } from "~/components/knowledge";
 import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
+import { CardDescription } from "~/components/ui/card";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { useDebounce } from "~/hooks/useDebounce";
 
@@ -55,24 +55,24 @@ export function Agent({ className, onRefresh }: AgentProps) {
                     onChange={partialSetAgent}
                 />
 
-                <Card className="p-4 m-4 lg:mx-6 xl:mx-8">
+                <div className="p-4 m-4 lg:mx-6 xl:mx-8">
                     <AgentForm
                         agent={agentUpdates}
                         onChange={debouncedSetAgentInfo}
                     />
-                </Card>
+                </div>
 
-                <Card className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
+                <div className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
                     <TypographyH4 className="flex items-center gap-2 border-b pb-2">
                         <WrenchIcon className="w-5 h-5" />
                         Tools
                     </TypographyH4>
 
-                    <TypographyP className="text-muted-foreground flex items-center gap-2">
+                    <CardDescription>
                         Add tools the allow the agent to perform useful actions
                         such as searching the web, reading files, or interacting
                         with other systems.
-                    </TypographyP>
+                    </CardDescription>
 
                     <ToolForm
                         agent={agentUpdates}
@@ -80,44 +80,47 @@ export function Agent({ className, onRefresh }: AgentProps) {
                             debouncedSetAgentInfo(convertTools(tools))
                         }
                     />
-                </Card>
+                </div>
 
-                <Card className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
+                <div className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
                     <TypographyH4 className="flex items-center gap-2 border-b pb-2">
                         <LibraryIcon className="w-6 h-6" />
                         Knowledge
                     </TypographyH4>
-                    <TypographyP className="text-muted-foreground flex items-center gap-2">
+                    <CardDescription>
                         Provide knowledge to the agent in the form of files,
                         website, or external links in order to give it context
                         about various topics.
-                    </TypographyP>
+                    </CardDescription>
                     <AgentKnowledgePanel
                         agentId={agent.id}
                         agent={agent}
                         updateAgent={debouncedSetAgentInfo}
                     />
-                </Card>
+                </div>
             </ScrollArea>
 
-            <footer className="flex justify-between items-center px-8 py-4 gap-4 text-muted-foreground shadow-inner">
-                {error ? (
-                    <TypographyP>Error saving agent</TypographyP>
-                ) : isUpdating ? (
-                    <TypographyP>Saving...</TypographyP>
-                ) : lastUpdated ? (
-                    <TypographyP>Saved</TypographyP>
-                ) : (
-                    <div />
-                )}
+            <footer className="flex justify-between items-center px-8 py-4 gap-4 shadow-inner">
+                <div className="text-muted-foreground">
+                    {error ? (
+                        <TypographyP>Error saving agent</TypographyP>
+                    ) : isUpdating ? (
+                        <TypographyP>Saving...</TypographyP>
+                    ) : lastUpdated ? (
+                        <TypographyP>Saved</TypographyP>
+                    ) : (
+                        <div />
+                    )}
+                </div>
 
                 <div className="flex gap-2">
                     <PastThreads
                         agentId={agent.id}
                         onThreadSelect={handleThreadSelect}
                     />
+
                     <Button
-                        variant="secondary"
+                        variant="outline"
                         className="flex gap-2"
                         onClick={() => {
                             onRefresh?.(null);
diff --git a/ui/admin/app/components/agent/PastThreads.tsx b/ui/admin/app/components/agent/PastThreads.tsx
index 3a9386f7..952deee4 100644
--- a/ui/admin/app/components/agent/PastThreads.tsx
+++ b/ui/admin/app/components/agent/PastThreads.tsx
@@ -60,15 +60,17 @@ export const PastThreads: React.FC<PastThreadsProps> = ({
 
     return (
         <Tooltip>
+            <TooltipContent>Switch threads</TooltipContent>
+
             <Popover open={open} onOpenChange={handleOpenChange}>
                 <PopoverTrigger asChild>
                     <TooltipTrigger asChild>
-                        <Button variant="secondary" size="icon">
+                        <Button variant="ghost" size="icon">
                             <ChevronUpIcon className="w-4 h-4" />
                         </Button>
                     </TooltipTrigger>
                 </PopoverTrigger>
-                <TooltipContent>Switch threads</TooltipContent>
+
                 <PopoverContent className="w-80 p-0">
                     <Command className="flex-col-reverse">
                         <CommandInput placeholder="Search threads..." />
diff --git a/ui/admin/app/components/agent/ToolEntry.tsx b/ui/admin/app/components/agent/ToolEntry.tsx
index d24bcbc0..7e510dfa 100644
--- a/ui/admin/app/components/agent/ToolEntry.tsx
+++ b/ui/admin/app/components/agent/ToolEntry.tsx
@@ -26,7 +26,7 @@ export function ToolEntry({
 
     return (
         <div className="flex items-center space-x-2 justify-between mt-1">
-            <div className="border 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 shadow-sm 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" />
@@ -46,7 +46,7 @@ export function ToolEntry({
 
                     <Button
                         type="button"
-                        variant="secondary"
+                        variant="ghost"
                         size="icon"
                         onClick={() => onDelete()}
                     >
diff --git a/ui/admin/app/components/chat/Chatbar.tsx b/ui/admin/app/components/chat/Chatbar.tsx
index cec3e9ce..89e7961a 100644
--- a/ui/admin/app/components/chat/Chatbar.tsx
+++ b/ui/admin/app/components/chat/Chatbar.tsx
@@ -1,4 +1,4 @@
-import { CircleArrowUpIcon } from "lucide-react";
+import { ArrowUpIcon } from "lucide-react";
 import { useState } from "react";
 
 import { cn } from "~/lib/utils";
@@ -34,7 +34,7 @@ export function Chatbar({ className }: ChatbarProps) {
         >
             <div className="relative flex-grow">
                 <AutosizeTextarea
-                    className="resize-none rounded-xl h-[2.5rem] line-height-[1.25rem] min-h-[2.5rem]"
+                    className="resize-none rounded-xl h-[2.5rem] line-height-[1.25rem] min-h-[2.5rem] bg-background"
                     value={input}
                     onKeyDown={(e) => {
                         if (e.key === "Enter" && !e.shiftKey) {
@@ -51,12 +51,11 @@ export function Chatbar({ className }: ChatbarProps) {
 
             <Button
                 size="icon"
-                variant="secondary"
                 className="rounded-full"
                 type="submit"
                 disabled={!input || isRunning || isInvoking}
             >
-                {isInvoking ? <LoadingSpinner /> : <CircleArrowUpIcon />}
+                {isInvoking ? <LoadingSpinner /> : <ArrowUpIcon />}
             </Button>
         </form>
     );
diff --git a/ui/admin/app/components/chat/Message.tsx b/ui/admin/app/components/chat/Message.tsx
index a4b92587..8bd6b27f 100644
--- a/ui/admin/app/components/chat/Message.tsx
+++ b/ui/admin/app/components/chat/Message.tsx
@@ -18,7 +18,6 @@ import { ControlledInput } from "~/components/form/controlledInputs";
 import { CustomMarkdownComponents } from "~/components/react-markdown";
 import { ToolIcon } from "~/components/tools/ToolIcon";
 import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
 import {
     Dialog,
     DialogContent,
@@ -67,13 +66,13 @@ export const Message = React.memo(({ message }: MessageProps) => {
             <div
                 className={cn("flex", isUser ? "justify-end" : "justify-start")}
             >
-                <Card
-                    className={cn(
-                        message.error &&
-                            "border border-error bg-error-foreground",
-                        "break-words overflow-hidden",
-                        isUser ? "max-w-[80%] bg-blue-500" : "w-full max-w-full"
-                    )}
+                <div
+                    className={cn({
+                        "border border-error bg-error-foreground rounded-xl":
+                            message.error,
+                        "rounded-2xl max-w-[80%] bg-accent": isUser,
+                        "w-full max-w-full": !isUser,
+                    })}
                 >
                     <div className="max-w-full overflow-hidden p-4 flex gap-2 items-center pl-[20px]">
                         {toolCall?.metadata?.icon && (
@@ -92,7 +91,8 @@ export const Message = React.memo(({ message }: MessageProps) => {
                                 className={cn(
                                     "flex-auto max-w-full prose overflow-x-auto dark:prose-invert prose-pre:whitespace-pre-wrap prose-pre:break-words prose-thead:text-left prose-img:rounded-xl prose-img:shadow-lg break-words",
                                     {
-                                        "text-white prose-invert": isUser,
+                                        "text-accent-foreground prose-invert":
+                                            isUser,
                                     }
                                 )}
                                 remarkPlugins={[remarkGfm]}
@@ -131,7 +131,7 @@ export const Message = React.memo(({ message }: MessageProps) => {
                             </div>
                         )}
                     </div>
-                </Card>
+                </div>
             </div>
         </div>
     );
@@ -158,12 +158,10 @@ function PromptMessage({ prompt }: { prompt: AuthPrompt }) {
 
             {prompt.metadata.authType === "oauth" && (
                 <Link
-                    buttonVariant="secondary"
                     as="button"
                     rel="noreferrer"
                     target="_blank"
                     to={prompt.metadata.authURL}
-                    className="w-fit"
                 >
                     <ToolIcon
                         icon={prompt.metadata.icon}
@@ -179,7 +177,6 @@ function PromptMessage({ prompt }: { prompt: AuthPrompt }) {
                 <Dialog open={open} onOpenChange={setOpen}>
                     <DialogTrigger asChild>
                         <Button
-                            variant="secondary"
                             startContent={
                                 <ToolIcon
                                     icon={prompt.metadata.icon}
diff --git a/ui/admin/app/components/chat/NoMessages.tsx b/ui/admin/app/components/chat/NoMessages.tsx
index d51285c2..956693dc 100644
--- a/ui/admin/app/components/chat/NoMessages.tsx
+++ b/ui/admin/app/components/chat/NoMessages.tsx
@@ -18,7 +18,8 @@ export function NoMessages() {
             </p>
             <div className="flex flex-wrap justify-center gap-2">
                 <Button
-                    variant="secondary"
+                    variant="outline"
+                    shape="pill"
                     disabled={isInvoking}
                     onClick={() =>
                         handleAddMessage(
@@ -30,7 +31,8 @@ export function NoMessages() {
                     Objectives
                 </Button>
                 <Button
-                    variant="secondary"
+                    variant="outline"
+                    shape="pill"
                     disabled={isInvoking}
                     onClick={() =>
                         handleAddMessage(
@@ -42,7 +44,8 @@ export function NoMessages() {
                     Tools
                 </Button>
                 <Button
-                    variant="secondary"
+                    variant="outline"
+                    shape="pill"
                     disabled={isInvoking}
                     onClick={() =>
                         handleAddMessage(
diff --git a/ui/admin/app/components/composed/CopyText.tsx b/ui/admin/app/components/composed/CopyText.tsx
index d8f057d9..f56cf5c9 100644
--- a/ui/admin/app/components/composed/CopyText.tsx
+++ b/ui/admin/app/components/composed/CopyText.tsx
@@ -38,7 +38,7 @@ export function CopyText({
     return (
         <div
             className={cn(
-                "flex items-center gap-2 bg-secondary rounded-md w-fit overflow-hidden",
+                "flex items-center gap-2 bg-accent rounded-md w-fit overflow-hidden",
                 className
             )}
         >
diff --git a/ui/admin/app/components/composed/DataTable.tsx b/ui/admin/app/components/composed/DataTable.tsx
index f3d5c73a..d023e885 100644
--- a/ui/admin/app/components/composed/DataTable.tsx
+++ b/ui/admin/app/components/composed/DataTable.tsx
@@ -50,9 +50,9 @@ export function DataTable<TData, TValue>({
     });
 
     return (
-        <div className="rounded-md border max-h-full overflow-auto">
+        <div className="rounded-md max-h-full overflow-auto">
             <Table className="h-full">
-                <TableHeader className="sticky top-0 bg-secondary">
+                <TableHeader className="sticky top-0">
                     {table.getHeaderGroups().map((headerGroup) => (
                         <TableRow key={headerGroup.id} className="p-4">
                             {headerGroup.headers.map((header) => {
diff --git a/ui/admin/app/components/header/HeaderNav.tsx b/ui/admin/app/components/header/HeaderNav.tsx
index 4c39e188..65e3c519 100644
--- a/ui/admin/app/components/header/HeaderNav.tsx
+++ b/ui/admin/app/components/header/HeaderNav.tsx
@@ -32,7 +32,7 @@ export function HeaderNav() {
             )}
         >
             <div className="h-full flex-auto flex">
-                <div className="flex flex-grow border-b">
+                <div className="flex flex-grow z-20">
                     <div className="flex-grow flex justify-start items-center p-4">
                         <SidebarTrigger className="h-4 w-4" />
                         <div className="border-r h-4 mx-4" />
diff --git a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
index d25992b1..ea93c431 100644
--- a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
+++ b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
@@ -433,7 +433,7 @@ export default function AgentKnowledgePanel({
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                             <Button
-                                variant="secondary"
+                                variant="ghost"
                                 className="flex items-center gap-2"
                             >
                                 <PlusIcon className="h-5 w-5 text-foreground" />
diff --git a/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx b/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx
index c4f50be4..19f6d471 100644
--- a/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx
+++ b/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx
@@ -37,7 +37,7 @@ export function OAuthAppTile({
     return (
         <Card
             className={cn("w-full flex flex-col", {
-                "border-2 border-primary": info.appOverride,
+                "border-2 border-accent-bold": info.appOverride,
             })}
         >
             <CardHeader className="flex flex-row justify-between items-start pb-2 space-y-0">
@@ -49,7 +49,7 @@ export function OAuthAppTile({
                     {info.appOverride ? (
                         <Tooltip>
                             <TooltipTrigger>
-                                <Badge>Custom</Badge>
+                                <Badge variant="bold">Custom</Badge>
                             </TooltipTrigger>
 
                             <TooltipContent>
diff --git a/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx b/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx
index dfa8422e..03d37fba 100644
--- a/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx
+++ b/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx
@@ -235,7 +235,7 @@ export function CustomOAuthAppForm({
                     <Button
                         className="flex-1 w-full"
                         type="button"
-                        variant="outline"
+                        variant="secondary"
                         onClick={onBack}
                     >
                         {prevLabel}
diff --git a/ui/admin/app/components/sidebar/Sidebar.tsx b/ui/admin/app/components/sidebar/Sidebar.tsx
index 18ea1ebd..4cbd0cdb 100644
--- a/ui/admin/app/components/sidebar/Sidebar.tsx
+++ b/ui/admin/app/components/sidebar/Sidebar.tsx
@@ -85,10 +85,7 @@ export function AppSidebar() {
         <Sidebar collapsible="icon">
             <SidebarRail />
             <SidebarHeader
-                className={cn(
-                    "border-b h-[60px]",
-                    state === "collapsed" ? "" : "px-4"
-                )}
+                className={cn("h-[60px]", state === "collapsed" ? "" : "px-4")}
             >
                 <div className={cn("flex items-center justify-center h-full")}>
                     <OttoLogo hideText={state === "collapsed"} />
diff --git a/ui/admin/app/components/thread/ThreadMeta.tsx b/ui/admin/app/components/thread/ThreadMeta.tsx
index 6897e724..2bc3b25f 100644
--- a/ui/admin/app/components/thread/ThreadMeta.tsx
+++ b/ui/admin/app/components/thread/ThreadMeta.tsx
@@ -40,7 +40,7 @@ export function ThreadMeta({
     return (
         <Card className={cn("h-full bg-0", className)}>
             <CardContent className="space-y-4 pt-6">
-                <div className="border dark:bg-secondary/25 rounded-md p-4 overflow-hidden">
+                <div className="bg-muted rounded-md p-4 overflow-hidden">
                     <table className="w-full">
                         <tbody>
                             <tr className="border-foreground/25">
diff --git a/ui/admin/app/components/tools/CreateTool.tsx b/ui/admin/app/components/tools/CreateTool.tsx
index d9cbbb23..8005130b 100644
--- a/ui/admin/app/components/tools/CreateTool.tsx
+++ b/ui/admin/app/components/tools/CreateTool.tsx
@@ -22,10 +22,6 @@ export function CreateTool({ onSuccess }: CreateToolProps) {
             });
             reset();
             onSuccess();
-        },
-        {
-            onError: (error) =>
-                console.error("Failed to create tool reference:", error),
         }
     );
 
@@ -41,7 +37,7 @@ export function CreateTool({ onSuccess }: CreateToolProps) {
                 />
             </div>
             <div className="flex justify-end">
-                <Button type="submit" variant="secondary" disabled={isLoading}>
+                <Button type="submit" disabled={isLoading}>
                     <PlusCircle className="w-4 h-4 mr-2" />
                     {isLoading ? "Creating..." : "Register Tool"}
                 </Button>
diff --git a/ui/admin/app/components/tools/ToolCatalog.tsx b/ui/admin/app/components/tools/ToolCatalog.tsx
index b2e27acb..b8441f71 100644
--- a/ui/admin/app/components/tools/ToolCatalog.tsx
+++ b/ui/admin/app/components/tools/ToolCatalog.tsx
@@ -148,7 +148,7 @@ export function ToolCatalogDialog(props: ToolCatalogProps) {
             </DialogContent>
 
             <DialogTrigger asChild>
-                <Button variant="secondary">
+                <Button variant="ghost">
                     <PlusIcon className="w-4 h-4 mr-2" /> Add Tool
                 </Button>
             </DialogTrigger>
diff --git a/ui/admin/app/components/tools/toolGrid/ToolCard.tsx b/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
index 2e6cbbca..5021c741 100644
--- a/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
+++ b/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
@@ -34,7 +34,7 @@ export function ToolCard({ tool, onDelete }: ToolCardProps) {
     return (
         <Card
             className={cn("flex flex-col h-full", {
-                "border-2 border-info": tool.metadata?.bundle,
+                "border-2 border-accent-bold": tool.metadata?.bundle,
                 "border-2 border-error": tool.error,
             })}
         >
@@ -59,7 +59,10 @@ export function ToolCard({ tool, onDelete }: ToolCardProps) {
                         </Tooltip>
                     )}
                     {tool.metadata?.bundle && (
-                        <Badge className="ml-2 bg-info pointer-events-none">
+                        <Badge
+                            variant="bold"
+                            className="ml-2 pointer-events-none"
+                        >
                             Bundle
                         </Badge>
                     )}
diff --git a/ui/admin/app/components/ui/badge.tsx b/ui/admin/app/components/ui/badge.tsx
index b6e14b52..e643cd1e 100644
--- a/ui/admin/app/components/ui/badge.tsx
+++ b/ui/admin/app/components/ui/badge.tsx
@@ -10,9 +10,9 @@ const badgeVariants = cva(
             variant: {
                 default:
                     "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+                bold: "bg-accent-bold text-accent-bold-foreground shadow hover:bg-accent-bold/80",
                 secondary:
                     "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-                info: "border-transparent bg-info text-info-foreground hover:bg-info/80",
                 destructive:
                     "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
                 outline: "text-foreground",
diff --git a/ui/admin/app/components/ui/button.tsx b/ui/admin/app/components/ui/button.tsx
index 176349ed..cbee230a 100644
--- a/ui/admin/app/components/ui/button.tsx
+++ b/ui/admin/app/components/ui/button.tsx
@@ -6,26 +6,27 @@ import * as React from "react";
 import { cn } from "~/lib/utils";
 
 export const ButtonClasses = {
-    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none hover:shadow-inner focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
     variants: {
         variant: {
             default:
-                "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+                "bg-primary text-primary-foreground shadow hover:bg-primary/80",
             destructive:
-                "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+                "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
             outline:
-                "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+                "border border-input bg-background shadow-sm hover:bg-muted/80",
             secondary:
                 "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline",
+            ghost: "hover:bg-secondary hover:text-secondary-foreground",
+            accent: "bg-accent text-accent-foreground shadow-sm hover:bg-accent/80",
+            link: "text-accent-bold hover:text-accent-bold/70 underline-offset-4 hover:underline shadow-none hover:shadow-none",
         },
         size: {
             default: "h-9 px-4 py-2",
             badge: "text-xs py-0.5 px-2",
             sm: "h-8 px-3 text-xs",
             lg: "h-10 px-8",
-            icon: "h-9 w-9 min-w-9 [&_svg]:size-[1.375rem]",
+            icon: "h-9 w-9 min-w-9 min-h-9 [&_svg]:size-[1.375rem]",
         },
         shape: {
             default: "rounded-md",
@@ -35,7 +36,7 @@ export const ButtonClasses = {
     defaultVariants: {
         variant: "default",
         size: "default",
-        shape: "default",
+        shape: "pill",
     },
 } as const;
 
diff --git a/ui/admin/app/components/ui/card.tsx b/ui/admin/app/components/ui/card.tsx
index 9738546a..44ad74ec 100644
--- a/ui/admin/app/components/ui/card.tsx
+++ b/ui/admin/app/components/ui/card.tsx
@@ -8,10 +8,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={cn(
-            "rounded-xl border bg-card text-card-foreground shadow",
-            className
-        )}
+        className={cn("rounded-xl bg-card text-card-foreground", className)}
         {...props}
     />
 ));
diff --git a/ui/admin/app/components/ui/link.tsx b/ui/admin/app/components/ui/link.tsx
index 2708100a..e5f4dc39 100644
--- a/ui/admin/app/components/ui/link.tsx
+++ b/ui/admin/app/components/ui/link.tsx
@@ -12,7 +12,7 @@ const linkVariants = cva("", {
     variants: {
         as: {
             button: cn(ButtonClasses.base, "flex flex-row items-center gap-2"),
-            default: "text-primary underline-offset-4 underline",
+            default: ButtonClasses.variants.variant.link,
             div: "",
         },
         buttonVariant: ButtonClasses.variants.variant,
diff --git a/ui/admin/app/components/ui/sidebar.tsx b/ui/admin/app/components/ui/sidebar.tsx
index b104514f..471d0870 100644
--- a/ui/admin/app/components/ui/sidebar.tsx
+++ b/ui/admin/app/components/ui/sidebar.tsx
@@ -252,7 +252,7 @@ const Sidebar = React.forwardRef<
                         // Adjust the padding for floating and inset variants.
                         variant === "floating" || variant === "inset"
                             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-                            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+                            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
                         className
                     )}
                     {...props}
diff --git a/ui/admin/app/components/ui/table.tsx b/ui/admin/app/components/ui/table.tsx
index 13421ca3..6138af7b 100644
--- a/ui/admin/app/components/ui/table.tsx
+++ b/ui/admin/app/components/ui/table.tsx
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
     <tr
         ref={ref}
         className={cn(
-            "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+            "border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted",
             className
         )}
         {...props}
diff --git a/ui/admin/app/components/workflow/steps/Step.tsx b/ui/admin/app/components/workflow/steps/Step.tsx
index 68079ab4..38d465e8 100644
--- a/ui/admin/app/components/workflow/steps/Step.tsx
+++ b/ui/admin/app/components/workflow/steps/Step.tsx
@@ -63,7 +63,7 @@ export function StepComponent({
                         )}
                     </Button>
 
-                    <div className="flex items-center justify-center p-2 w-24 bg-background border rounded-md mr-2">
+                    <div className="flex items-center justify-center p-2 w-24 bg-background-secondary border rounded-md mr-2">
                         <ArrowRight className="w-4 h-4 mr-1" />
                         <span className="text-sm font-medium">Step</span>
                     </div>
@@ -77,7 +77,7 @@ export function StepComponent({
                     placeholder="Step"
                     maxHeight={100}
                     minHeight={0}
-                    className="flex-grow bg-background"
+                    className="flex-grow bg-background-secondary"
                     onClick={(e) => e.stopPropagation()}
                 />
 
diff --git a/ui/admin/app/lib/model/runs.ts b/ui/admin/app/lib/model/runs.ts
index c9982ace..faf096d2 100644
--- a/ui/admin/app/lib/model/runs.ts
+++ b/ui/admin/app/lib/model/runs.ts
@@ -29,6 +29,6 @@ export const runStateToBadgeColor = (state: RunState | undefined) => {
         case "error":
             return "bg-error";
         default:
-            return "bg-info";
+            return "bg-secondary";
     }
 };
diff --git a/ui/admin/app/routes/_auth.agents.$agent.tsx b/ui/admin/app/routes/_auth.agents.$agent.tsx
index 24adf4d7..4ae89bda 100644
--- a/ui/admin/app/routes/_auth.agents.$agent.tsx
+++ b/ui/admin/app/routes/_auth.agents.$agent.tsx
@@ -84,7 +84,7 @@ export default function ChatAgent() {
                         </ResizablePanel>
                         <ResizableHandle withHandle />
                         <ResizablePanel>
-                            <Chat />
+                            <Chat className="bg-sidebar" />
                         </ResizablePanel>
                     </ResizablePanelGroup>
                 </AgentProvider>
diff --git a/ui/admin/app/routes/_auth.threads.tsx b/ui/admin/app/routes/_auth.threads.tsx
index dddcdc8c..8a0ac739 100644
--- a/ui/admin/app/routes/_auth.threads.tsx
+++ b/ui/admin/app/routes/_auth.threads.tsx
@@ -325,7 +325,7 @@ function ThreadFilters({
                     key={filter.key}
                     size="badge"
                     onClick={filter.onRemove}
-                    variant="secondary"
+                    variant="accent"
                     shape="pill"
                     endContent={<XIcon />}
                 >
diff --git a/ui/admin/app/routes/_auth.tools._index.tsx b/ui/admin/app/routes/_auth.tools._index.tsx
index 1f423875..06a8e916 100644
--- a/ui/admin/app/routes/_auth.tools._index.tsx
+++ b/ui/admin/app/routes/_auth.tools._index.tsx
@@ -17,6 +17,7 @@ import {
     DialogTrigger,
 } from "~/components/ui/dialog";
 import { Input } from "~/components/ui/input";
+import { ScrollArea } from "~/components/ui/scroll-area";
 
 export async function clientLoader() {
     await Promise.all([
@@ -49,7 +50,7 @@ export default function Tools() {
     };
 
     return (
-        <div className="h-full p-8 flex flex-col gap-4">
+        <ScrollArea className="h-full p-8 flex flex-col gap-4">
             <div className="flex justify-between items-center">
                 <TypographyH2>Tools</TypographyH2>
                 <div className="flex items-center space-x-2">
@@ -93,6 +94,6 @@ export default function Tools() {
                     onDelete={handleDelete}
                 />
             )}
-        </div>
+        </ScrollArea>
     );
 }
diff --git a/ui/admin/app/tailwind.css b/ui/admin/app/tailwind.css
index 10486115..8317234a 100644
--- a/ui/admin/app/tailwind.css
+++ b/ui/admin/app/tailwind.css
@@ -13,96 +13,147 @@ body {
 
 @layer base {
     :root {
+        --main-surface-primary: 0 0% 98%;
+        --main-surface-secondary: 223 5% 95%;
+
+        --accent-surface-primary: 0 0% 91%;
+        --accent-surface-secondary: 223 87% 91%;
+
+        --text-primary: 223 5% 5%;
+        --text-secondary: 223 5% 25%;
+        --text-muted: 223 5% 40%;
+        --text-inverted: 0 0% 98%;
+
+        --border-light: 223 5% 85%;
+        --border-normal: 223 5% 75%;
+
+        --accent-primary: 223 5% 10%;
+        --accent-secondary: 223 87% 63%;
+
+        --black: 0 0% 0%;
+        --white: 0 0% 100%;
+
         --success: 142 76% 36%;
         --success-foreground: 142 84% 95%;
+
         --warning: 38 92% 50%;
         --warning-foreground: 38 100% 95%;
+
         --error: 0 84% 60%;
         --error-foreground: 0 100% 95%;
-        --info: 217 91% 60%;
-        --info-foreground: 217 100% 95%;
-        --background: 0 0% 100%;
-        --foreground: 240 10% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 240 10% 3.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 240 10% 3.9%;
-        --dialog: 0 0% 100%;
-        --dialog-foreground: 240 10% 3.9%;
-        --primary: 240 5.9% 10%;
-        --primary-foreground: 0 0% 98%;
-        --secondary: 240 4.8% 95.9%;
-        --secondary-foreground: 240 5.9% 10%;
-        --muted: 240 4.8% 95.9%;
-        --muted-foreground: 240 3.8% 46.1%;
-        --accent: 240 4.8% 95.9%;
-        --accent-foreground: 240 5.9% 10%;
+
         --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --destructive-background: 0 84.2% 95%;
-        --border: 240 5.9% 90%;
-        --input: 240 5.9% 90%;
-        --ring: 240 10% 3.9%;
+        --destructive-foreground: var(--white);
+
+        --background: var(--main-surface-primary);
+        --background-secondary: var(--main-surface-secondary);
+        --foreground: var(--text-primary);
+
+        --card: var(--main-surface-secondary);
+        --card-foreground: var(--text-primary);
+        --popover: var(--main-surface-primary);
+        --popover-foreground: var(--text-primary);
+        --dialog: var(--main-surface-primary);
+        --dialog-foreground: var(--text-primary);
+
+        --primary: var(--accent-primary);
+        --primary-foreground: var(--text-inverted);
+        --secondary: var(--accent-surface-primary);
+        --secondary-foreground: var(--text-primary);
+        --muted: var(--accent-surface-primary);
+        --muted-foreground: var(--text-muted);
+        --accent-bold: var(--accent-secondary);
+        --accent-bold-foreground: var(--text-inverted);
+        --accent: var(--accent-surface-secondary);
+        --accent-foreground: var(--text-secondary);
+
+        --link: var(--accent-bold);
+        --border: var(--border-light);
+        --input: var(--border-normal);
+        --ring: var(--accent-secondary);
+
         --chart-1: 12 76% 61%;
         --chart-2: 173 58% 39%;
         --chart-3: 197 37% 24%;
         --chart-4: 43 74% 66%;
         --chart-5: 27 87% 67%;
         --radius: 0.5rem;
-        --sidebar-background: 0 0% 100%;
-        --sidebar-foreground: 240 5.3% 26.1%;
-        --sidebar-primary: 240 5.9% 10%;
-        --sidebar-primary-foreground: 0 0% 98%;
-        --sidebar-accent: 240 4.8% 95.9%;
-        --sidebar-accent-foreground: 240 5.9% 10%;
-        --sidebar-border: 220 13% 91%;
-        --sidebar-ring: 217.2 91.2% 59.8%;
+
+        --sidebar-background: var(--main-surface-secondary);
+        --sidebar-foreground: var(--text-primary);
+        --sidebar-primary: var(--accent-primary);
+        --sidebar-primary-foreground: var(--text-inverted);
+        --sidebar-accent: var(--accent-surface-secondary);
+        --sidebar-accent-foreground: var(--text-primary);
+        --sidebar-border: var(--border-light);
+        --sidebar-ring: var(--accent-secondary);
     }
     .dark {
         color-scheme: dark;
-        --success: 142 76% 36%;
-        --success-foreground: 142 30% 20%;
-        --warning: 38 92% 50%;
-        --warning-foreground: 38 35% 15%;
-        --error: 0 84% 60%;
-        --error-foreground: 0 30% 20%;
-        --info: 217 91% 60%;
-        --info-foreground: 217 30% 20%;
-        --background: 240 10% 3.9%;
-        --foreground: 0 0% 98%;
-        --card: 240 10% 3.9%;
-        --card-foreground: 0 0% 98%;
-        --popover: 240 10% 3.9%;
-        --popover-foreground: 0 0% 98%;
-        --dialog: 240 10% 3.9%;
-        --dialog-foreground: 0 0% 98%;
-        --primary: 0 0% 98%;
-        --primary-foreground: 240 5.9% 10%;
-        --secondary: 240 3.7% 15.9%;
-        --secondary-foreground: 0 0% 98%;
-        --muted: 240 3.7% 15.9%;
-        --muted-foreground: 240 5% 64.9%;
-        --accent: 240 3.7% 15.9%;
-        --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 0% 98%;
-        --destructive-background: 0 62.8% 10%;
-        --border: 240 3.7% 15.9%;
-        --input: 240 3.7% 15.9%;
-        --ring: 240 4.9% 83.9%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
-        --sidebar-background: 240 10% 3.9%;
-        --sidebar-foreground: 240 4.8% 95.9%;
-        --sidebar-primary: 224.3 76.3% 48%;
-        --sidebar-primary-foreground: 0 0% 100%;
-        --sidebar-accent: 240 3.7% 15.9%;
-        --sidebar-accent-foreground: 240 4.8% 95.9%;
-        --sidebar-border: 240 3.7% 15.9%;
-        --sidebar-ring: 217.2 91.2% 59.8%;
+
+        --main-surface-primary: 223 20% 10%;
+        --main-surface-secondary: 223 20% 5%;
+
+        --accent-surface-primary: 223 5% 15%;
+        --accent-surface-secondary: 223 87% 25%;
+
+        --text-primary: 223 5% 85%;
+        --text-secondary: 223 5% 75%;
+        --text-muted: 223 5% 55%;
+        --text-inverted: 0 0% 10%;
+
+        --border-light: 223 5% 20%;
+        --border-normal: 223 5% 30%;
+
+        --accent-primary: 223 5% 85%;
+        --accent-secondary: 223 87% 63%;
+
+        --background: var(--main-surface-primary);
+        --background-secondary: var(--main-surface-secondary);
+        --foreground: var(--text-primary);
+
+        --error: 0 84% 20%;
+        --error-foreground: 0 100% 7%;
+
+        --card: var(--main-surface-secondary);
+        --card-foreground: var(--text-primary);
+        --popover: var(--main-surface-primary);
+        --popover-foreground: var(--text-primary);
+        --dialog: var(--main-surface-primary);
+        --dialog-foreground: var(--text-primary);
+
+        --primary: var(--accent-primary);
+        --primary-foreground: var(--text-inverted);
+        --secondary: var(--accent-surface-primary);
+        --secondary-foreground: var(--text-primary);
+        --muted: var(--accent-surface-primary);
+        --muted-foreground: var(--text-muted);
+        --accent-bold: var(--accent-secondary);
+        --accent-bold-foreground: var(--text-inverted);
+        --accent: var(--accent-surface-secondary);
+        --accent-foreground: var(--text-primary);
+
+        --link: var(--accent-bold);
+        --border: var(--border-light);
+        --input: var(--border-normal);
+        --ring: var(--accent-secondary);
+
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+
+        --radius: 0.5rem;
+
+        --sidebar-background: var(--main-surface-secondary);
+        --sidebar-foreground: var(--text-primary);
+        --sidebar-primary: var(--accent-primary);
+        --sidebar-primary-foreground: var(--text-inverted);
+        --sidebar-accent: var(--accent-surface-secondary);
+        --sidebar-accent-foreground: var(--text-primary);
+        --sidebar-border: var(--border-light);
+        --sidebar-ring: var(--accent-secondary);
     }
 }
 
diff --git a/ui/admin/tailwind.config.ts b/ui/admin/tailwind.config.ts
index 1a2e5064..f839fc69 100644
--- a/ui/admin/tailwind.config.ts
+++ b/ui/admin/tailwind.config.ts
@@ -7,6 +7,9 @@ export default {
     content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
     theme: {
         extend: {
+            boxShadow: {
+                t: "0 -2px 3px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+            },
             fontFamily: {
                 sans: [
                     "Inter",
@@ -37,11 +40,10 @@ export default {
                     DEFAULT: "hsl(var(--error))",
                     foreground: "hsl(var(--error-foreground))",
                 },
-                info: {
-                    DEFAULT: "hsl(var(--info))",
-                    foreground: "hsl(var(--info-foreground))",
+                background: {
+                    DEFAULT: "hsl(var(--background))",
+                    secondary: "hsl(var(--background-secondary))",
                 },
-                background: "hsl(var(--background))",
                 foreground: "hsl(var(--foreground))",
                 card: {
                     DEFAULT: "hsl(var(--card))",
@@ -70,11 +72,14 @@ export default {
                 accent: {
                     DEFAULT: "hsl(var(--accent))",
                     foreground: "hsl(var(--accent-foreground))",
+                    bold: {
+                        DEFAULT: "hsl(var(--accent-bold))",
+                        foreground: "hsl(var(--accent-bold-foreground))",
+                    },
                 },
                 destructive: {
                     DEFAULT: "hsl(var(--destructive))",
                     foreground: "hsl(var(--destructive-foreground))",
-                    background: "hsl(var(--destructive-background))",
                 },
                 border: "hsl(var(--border))",
                 input: "hsl(var(--input))",