From 1057dbf5db68d30ccb4a3460d8fd0285ea87978a Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Tue, 17 Mar 2026 20:15:50 +0100
Subject: [PATCH 1/2] feat: refine dark theme, sidebar styling, and simplify
 agent selector

Update dark mode palette to a blue-tinted scheme for better visual depth.
Add dedicated sidebar color variable and apply bg-sidebar to navigation
components. Simplify agent selector by removing configure button and radio
indicators. Fix dev script to re-read CONVEX_DEPLOYMENT after Convex starts.
---
 .../navigation/mobile-navigation.stories.tsx  |  2 +-
 .../ui/navigation/mobile-navigation.tsx       |  2 +-
 .../ui/navigation/navigation.stories.tsx      |  2 +-
 .../components/ui/navigation/navigation.tsx   |  2 +-
 .../__tests__/agent-selector.test.tsx         | 41 -----------------
 .../chat/components/agent-selector.tsx        | 45 ++-----------------
 .../activate-conversations-empty-state.tsx    |  2 +-
 services/platform/app/globals.css             | 42 +++++++++--------
 .../platform/app/routes/dashboard/$id.tsx     |  4 +-
 services/platform/convex/_generated/api.d.ts  |  1 -
 .../convex/betterAuth/_generated/component.ts |  1 -
 services/platform/scripts/dev.ts              | 11 +++++
 12 files changed, 45 insertions(+), 110 deletions(-)

diff --git a/services/platform/app/components/ui/navigation/mobile-navigation.stories.tsx b/services/platform/app/components/ui/navigation/mobile-navigation.stories.tsx
index 27771fa6ba..45b876b4db 100644
--- a/services/platform/app/components/ui/navigation/mobile-navigation.stories.tsx
+++ b/services/platform/app/components/ui/navigation/mobile-navigation.stories.tsx
@@ -141,7 +141,7 @@ function MobileNavigationVisual({
         className="w-72 p-0"
         hideClose
       >
-        <NavigationMenu className="bg-background flex h-full w-full max-w-none flex-col">
+        <NavigationMenu className="bg-sidebar flex h-full w-full max-w-none flex-col">
           <div className="border-border flex h-14 shrink-0 items-center border-b px-4 py-2">
             <div className="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded text-xs font-bold">
               T
diff --git a/services/platform/app/components/ui/navigation/mobile-navigation.tsx b/services/platform/app/components/ui/navigation/mobile-navigation.tsx
index 4f05c4f8fd..bf8b7237bf 100644
--- a/services/platform/app/components/ui/navigation/mobile-navigation.tsx
+++ b/services/platform/app/components/ui/navigation/mobile-navigation.tsx
@@ -126,7 +126,7 @@ export function MobileNavigation({ organizationId }: MobileNavigationProps) {
         className="w-72 p-0"
         hideClose
       >
-        <NavigationMenu className="bg-background flex h-full w-full max-w-none flex-col">
+        <NavigationMenu className="bg-sidebar flex h-full w-full max-w-none flex-col">
           <div className="border-border flex h-(--nav-size) flex-shrink-0 items-center border-b px-4 py-2">
             <Link
               to="/dashboard/$id/chat"
diff --git a/services/platform/app/components/ui/navigation/navigation.stories.tsx b/services/platform/app/components/ui/navigation/navigation.stories.tsx
index 7c67920b11..da53de4e4d 100644
--- a/services/platform/app/components/ui/navigation/navigation.stories.tsx
+++ b/services/platform/app/components/ui/navigation/navigation.stories.tsx
@@ -71,7 +71,7 @@ function SidebarShell({
   showLogo?: boolean;
 }) {
   return (
-    <NavigationMenu className="bg-background border-border flex h-[500px] w-14 flex-col rounded-lg border">
+    <NavigationMenu className="bg-sidebar border-border flex h-[500px] w-14 flex-col rounded-lg border">
       {showLogo && (
         <div className="flex flex-shrink-0 items-center justify-center py-3">
           <div className="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded text-xs font-bold">
diff --git a/services/platform/app/components/ui/navigation/navigation.tsx b/services/platform/app/components/ui/navigation/navigation.tsx
index a62b2bbba6..66573ef850 100644
--- a/services/platform/app/components/ui/navigation/navigation.tsx
+++ b/services/platform/app/components/ui/navigation/navigation.tsx
@@ -112,7 +112,7 @@ export function Navigation({ organizationId }: NavigationProps) {
   const navigationItems = useNavigationItems(organizationId);
 
   return (
-    <NavigationMenu className="bg-background border-border flex h-full flex-col">
+    <NavigationMenu className="border-border flex h-full flex-col">
       <div className="flex flex-shrink-0 items-center justify-center py-3">
         <Link
           to="/dashboard/$id/chat"
diff --git a/services/platform/app/features/chat/components/__tests__/agent-selector.test.tsx b/services/platform/app/features/chat/components/__tests__/agent-selector.test.tsx
index 57ac99de23..69f87bc586 100644
--- a/services/platform/app/features/chat/components/__tests__/agent-selector.test.tsx
+++ b/services/platform/app/features/chat/components/__tests__/agent-selector.test.tsx
@@ -14,7 +14,6 @@ vi.mock('@/lib/i18n/client', () => ({
         'agentSelector.searchPlaceholder': 'Search agents...',
         'agentSelector.noResults': 'No agents found',
         'agentSelector.addAgent': 'Add agent',
-        'agentSelector.configureAgent': 'Configure agent',
       };
       return translations[key] ?? key;
     },
@@ -112,10 +111,8 @@ vi.mock(
   }),
 );
 
-const mockNavigate = vi.fn();
 vi.mock('@tanstack/react-router', () => ({
   useSearch: () => ({}),
-  useNavigate: () => mockNavigate,
   useLocation: () => ({ pathname: '/dashboard/org-1/chat' }),
 }));
 
@@ -226,44 +223,6 @@ describe('AgentSelector', () => {
     });
   });
 
-  it('shows configure button for all agents when user has write permission', async () => {
-    const { user } = render(<AgentSelector organizationId="org-1" />);
-
-    const trigger = screen.getByLabelText('Select agent');
-    await user.click(trigger);
-
-    const configButtons = screen.getAllByLabelText('Configure agent');
-    expect(configButtons).toHaveLength(2);
-  });
-
-  it('does not show configure button when user lacks write permission', async () => {
-    mockCanWrite = false;
-
-    const { user } = render(<AgentSelector organizationId="org-1" />);
-
-    const trigger = screen.getByLabelText('Select agent');
-    await user.click(trigger);
-
-    expect(screen.queryByLabelText('Configure agent')).not.toBeInTheDocument();
-  });
-
-  it('navigates to agent config when configure button is clicked', async () => {
-    const { user } = render(<AgentSelector organizationId="org-1" />);
-
-    const trigger = screen.getByLabelText('Select agent');
-    await user.click(trigger);
-
-    const configButtons = screen.getAllByLabelText('Configure agent');
-    const customAgentConfig = configButtons[1];
-    expect(customAgentConfig).toBeDefined();
-    await user.click(customAgentConfig);
-
-    expect(mockNavigate).toHaveBeenCalledWith({
-      to: '/dashboard/$id/custom-agents/$agentId',
-      params: { id: 'org-1', agentId: 'root-2' },
-    });
-  });
-
   it('only highlights one agent when multiple have isSystemDefault', async () => {
     mockAgents = [
       {
diff --git a/services/platform/app/features/chat/components/agent-selector.tsx b/services/platform/app/features/chat/components/agent-selector.tsx
index 87bfd708e4..dd8308c697 100644
--- a/services/platform/app/features/chat/components/agent-selector.tsx
+++ b/services/platform/app/features/chat/components/agent-selector.tsx
@@ -1,15 +1,10 @@
 'use client';
 
-import { useNavigate } from '@tanstack/react-router';
-import { Bot, ChevronDown, Plus, Settings } from 'lucide-react';
-import { type MouseEvent, useCallback, useMemo, useState } from 'react';
+import { Bot, ChevronDown, Plus } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
 
-import {
-  SearchableSelect,
-  type SearchableSelectOption,
-} from '@/app/components/ui/forms/searchable-select';
+import { SearchableSelect } from '@/app/components/ui/forms/searchable-select';
 import { Button } from '@/app/components/ui/primitives/button';
-import { IconButton } from '@/app/components/ui/primitives/icon-button';
 import { CreateCustomAgentDialog } from '@/app/features/custom-agents/components/custom-agent-create-dialog';
 import { useAbility } from '@/app/hooks/use-ability';
 import { useDialogSearchParam } from '@/app/hooks/use-dialog-search-param';
@@ -26,7 +21,6 @@ interface AgentSelectorProps {
 export function AgentSelector({ organizationId }: AgentSelectorProps) {
   const { t } = useT('chat');
   const ability = useAbility();
-  const navigate = useNavigate();
   const { setSelectedAgent } = useChatLayout();
   const effectiveAgent = useEffectiveAgent(organizationId);
   const { agents: allAgents } = useChatAgents(organizationId);
@@ -79,35 +73,6 @@ export function AgentSelector({ organizationId }: AgentSelectorProps) {
     createAgentDialog.open();
   }, [createAgentDialog]);
 
-  const handleConfigClick = useCallback(
-    (option: SearchableSelectOption, e: MouseEvent) => {
-      e.stopPropagation();
-      setOpen(false);
-      void navigate({
-        to: '/dashboard/$id/custom-agents/$agentId',
-        params: { id: organizationId, agentId: option.value },
-      });
-    },
-    [navigate, organizationId],
-  );
-
-  const renderOptionAction = useCallback(
-    (option: SearchableSelectOption) => {
-      if (!canManageAgents) return null;
-      return (
-        <IconButton
-          icon={Settings}
-          aria-label={t('agentSelector.configureAgent')}
-          variant="ghost"
-          iconSize={4}
-          className="size-8 shrink-0 rounded-md"
-          onClick={(e) => handleConfigClick(option, e)}
-        />
-      );
-    },
-    [canManageAgents, t, handleConfigClick],
-  );
-
   return (
     <>
       <SearchableSelect
@@ -119,12 +84,10 @@ export function AgentSelector({ organizationId }: AgentSelectorProps) {
         align="start"
         side="top"
         sideOffset={8}
-        contentClassName="w-[20rem]"
+        contentClassName="w-[16.25rem]"
         searchPlaceholder={t('agentSelector.searchPlaceholder')}
         emptyText={t('agentSelector.noResults')}
         aria-label={t('agentSelector.label')}
-        showRadio
-        optionAction={renderOptionAction}
         trigger={
           <button
             type="button"
diff --git a/services/platform/app/features/conversations/components/activate-conversations-empty-state.tsx b/services/platform/app/features/conversations/components/activate-conversations-empty-state.tsx
index 72b80544a0..5c07c2eeae 100644
--- a/services/platform/app/features/conversations/components/activate-conversations-empty-state.tsx
+++ b/services/platform/app/features/conversations/components/activate-conversations-empty-state.tsx
@@ -17,7 +17,7 @@ export function ActivateConversationsEmptyState({
   const { t } = useT('conversations');
 
   return (
-    <div className="ring-border m-4 flex flex-1 items-center justify-center rounded-xl px-4 py-12 ring-1">
+    <div className="m-4 flex flex-1 items-center justify-center rounded-xl px-4 py-12">
       <div className="flex max-w-md flex-col items-center text-center">
         <MessageSquare className="text-muted-foreground mb-4 size-6" />
         <Heading level={2} size="lg" className="mb-1">
diff --git a/services/platform/app/globals.css b/services/platform/app/globals.css
index 5289197f93..1d936fa9ed 100644
--- a/services/platform/app/globals.css
+++ b/services/platform/app/globals.css
@@ -47,6 +47,8 @@
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));
 
+  --color-sidebar: hsl(var(--sidebar));
+
   --color-chart-1: hsl(var(--chart-1));
   --color-chart-2: hsl(var(--chart-2));
   --color-chart-3: hsl(var(--chart-3));
@@ -117,6 +119,7 @@
   --border: 240 5.9% 90%;
   --input: 240 5.9% 90%;
   --ring: 240 10% 3.9%;
+  --sidebar: 0 0% 98.8%;
   --chart-1: 12 76% 61%;
   --chart-2: 173 58% 39%;
   --chart-3: 197 37% 24%;
@@ -128,31 +131,32 @@
 
 /* CSS variables for dark mode */
 .dark {
-  --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%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
-  --secondary: 220 12% 75%;
-  --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 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
+  --background: 224 71% 4%;
+  --foreground: 0 0% 100%;
+  --card: 224 71% 4%;
+  --card-foreground: 0 0% 100%;
+  --popover: 224 71% 4%;
+  --popover-foreground: 0 0% 100%;
+  --sidebar: 218 31% 7%;
+  --primary: 0 0% 100%;
+  --primary-foreground: 222 73% 3%;
+  --secondary: 218 11% 85%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 217 19% 17%;
+  --muted-foreground: 218 11% 65%;
+  --accent: 217 19% 17%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 91% 71%;
+  --destructive-foreground: 0 0% 100%;
   --success: 155 85% 35%;
   --success-foreground: 0 0% 98%;
   --warning: 38 92% 50%;
   --warning-foreground: 0 0% 98%;
   --info: 214 35% 18%;
   --info-foreground: 214 80% 65%;
-  --border: 240 3.7% 15.9%;
-  --input: 240 3.7% 15.9%;
-  --ring: 240 4.9% 83.9%;
+  --border: 217 13% 34%;
+  --input: 217 13% 34%;
+  --ring: 217 100% 66%;
   --chart-1: 220 70% 50%;
   --chart-2: 160 60% 45%;
   --chart-3: 30 80% 55%;
diff --git a/services/platform/app/routes/dashboard/$id.tsx b/services/platform/app/routes/dashboard/$id.tsx
index 150e20ac1d..fc9c38dced 100644
--- a/services/platform/app/routes/dashboard/$id.tsx
+++ b/services/platform/app/routes/dashboard/$id.tsx
@@ -63,12 +63,12 @@ function DashboardLayout() {
         <TeamFilterProvider organizationId={organizationId}>
           <AdaptiveHeaderProvider>
             <div className="flex size-full flex-col overflow-hidden md:flex-row">
-              <div className="bg-background flex h-[--nav-size] items-center gap-2 p-2 md:hidden">
+              <div className="bg-sidebar flex h-[--nav-size] items-center gap-2 p-2 md:hidden">
                 <MobileNavigation organizationId={organizationId} />
                 <AdaptiveHeaderSlot />
               </div>
 
-              <div className="hidden h-full px-2 md:flex md:flex-[0_0_var(--nav-size)]">
+              <div className="hidden h-full px-2 md:flex md:flex-[0_0_var(--nav-size)] bg-sidebar">
                 <Navigation organizationId={organizationId} />
               </div>
 
diff --git a/services/platform/convex/_generated/api.d.ts b/services/platform/convex/_generated/api.d.ts
index fe1c3d16ea..169840f590 100644
--- a/services/platform/convex/_generated/api.d.ts
+++ b/services/platform/convex/_generated/api.d.ts
@@ -2690,7 +2690,6 @@ export declare const components: {
             maximumRowsRead?: number;
             numItems: number;
           };
-          select?: Array<string>;
           sortBy?: { direction: "asc" | "desc"; field: string };
           where?: Array<{
             connector?: "AND" | "OR";
diff --git a/services/platform/convex/betterAuth/_generated/component.ts b/services/platform/convex/betterAuth/_generated/component.ts
index 4fe852e342..5dfb05b485 100644
--- a/services/platform/convex/betterAuth/_generated/component.ts
+++ b/services/platform/convex/betterAuth/_generated/component.ts
@@ -980,7 +980,6 @@ export type ComponentApi<Name extends string | undefined = string | undefined> =
             maximumRowsRead?: number;
             numItems: number;
           };
-          select?: Array<string>;
           sortBy?: { direction: "asc" | "desc"; field: string };
           where?: Array<{
             connector?: "AND" | "OR";
diff --git a/services/platform/scripts/dev.ts b/services/platform/scripts/dev.ts
index 7033af6ec0..9ae7274fee 100644
--- a/services/platform/scripts/dev.ts
+++ b/services/platform/scripts/dev.ts
@@ -374,6 +374,17 @@ async function main() {
 
     await waitForConvex();
 
+    // Re-read CONVEX_DEPLOYMENT from .env.local in case `convex dev` wrote it
+    // after our initial loadEnvFiles() call (happens on first run with fresh DB)
+    const platformEnvLocalPath = join(platformRoot, '.env.local');
+    const freshEnv = parseDotEnv(platformEnvLocalPath);
+    if (freshEnv.CONVEX_DEPLOYMENT && !process.env.CONVEX_DEPLOYMENT) {
+      process.env.CONVEX_DEPLOYMENT = freshEnv.CONVEX_DEPLOYMENT;
+      console.log(
+        `[dev] ℹ️  Picked up new deployment: ${freshEnv.CONVEX_DEPLOYMENT}`,
+      );
+    }
+
     console.log('[dev] 🔄 Syncing environment variables...');
     try {
       await runCommand('bun', ['scripts/sync-convex-env-from-dotenv.ts']);

From de75e7772504f9aee37b656ad2b864a128ae6b54 Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Tue, 17 Mar 2026 21:16:16 +0100
Subject: [PATCH 2/2] fix: sort Tailwind classes in dashboard layout

---
 services/platform/app/routes/dashboard/$id.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/platform/app/routes/dashboard/$id.tsx b/services/platform/app/routes/dashboard/$id.tsx
index fc9c38dced..7144973709 100644
--- a/services/platform/app/routes/dashboard/$id.tsx
+++ b/services/platform/app/routes/dashboard/$id.tsx
@@ -68,7 +68,7 @@ function DashboardLayout() {
                 <AdaptiveHeaderSlot />
               </div>
 
-              <div className="hidden h-full px-2 md:flex md:flex-[0_0_var(--nav-size)] bg-sidebar">
+              <div className="bg-sidebar hidden h-full px-2 md:flex md:flex-[0_0_var(--nav-size)]">
                 <Navigation organizationId={organizationId} />
               </div>
 
