fix: rearrange sidebar nav items & combobox multi-highlight name fix (#1732)

* fix: rearrange sidebar nav items & combobox multi-highlight name fix

* add sublabel and min-w for combobox table filter

* Update ComboBox.tsx

Author: ivyjeong13

ui/admin/app/components/composed/ComboBox.tsx

@@ -1,6 +1,8 @@
 import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
 import { ReactNode, useState } from "react";
 
+import { cn } from "~/lib/utils";
+
 import { Button, ButtonProps } from "~/components/ui/button";
 import {
 	Command,
@@ -20,7 +22,8 @@ import { useIsMobile } from "~/hooks/use-mobile";
 
 type BaseOption = {
 	id: string;
-	name?: string | undefined;
+	name?: string;
+	sublabel?: string;
 };
 
 type GroupedOption<T extends BaseOption> = {
@@ -42,6 +45,9 @@ type ComboBoxProps<T extends BaseOption> = {
 	renderOption?: (option: T) => ReactNode;
 	validateCreate?: (value: string) => boolean;
 	value?: T | null;
+	classNames?: {
+		command?: string;
+	};
 };
 
 export function ComboBox<T extends BaseOption>({
@@ -125,6 +131,7 @@ function ComboBoxList<T extends BaseOption>({
 	placeholder = "Filter...",
 	emptyLabel = "No results found.",
 	closeOnSelect = true,
+	classNames,
 }: { setOpen: (open: boolean) => void } & ComboBoxProps<T>) {
 	const [filteredOptions, setFilteredOptions] =
 		useState<typeof options>(options);
@@ -173,7 +180,10 @@ function ComboBoxList<T extends BaseOption>({
 	return (
 		<Command
 			shouldFilter={false}
-			className="max-h-[50vh] w-[var(--radix-popper-anchor-width)]"
+			className={cn(
+				"max-h-[50vh] w-[var(--radix-popper-anchor-width)]",
+				classNames?.command
+			)}
 		>
 			<CommandInput
 				placeholder={placeholder}
@@ -235,7 +245,7 @@ function ComboBoxList<T extends BaseOption>({
 		return (
 			<CommandItem
 				key={option.id}
-				value={option.name}
+				value={option.id}
 				onSelect={() => {
 					onChange(option);
 					if (closeOnSelect) setOpen(false);
@@ -244,6 +254,12 @@ function ComboBoxList<T extends BaseOption>({
 			>
 				<span>
 					{renderOption ? renderOption(option) : (option.name ?? option.id)}
+					{option.sublabel && (
+						<small className="text-muted-foreground">
+							{" "}
+							({option.sublabel})
+						</small>
+					)}
 				</span>
 				{value?.id === option.id && <CheckIcon className="h-4 w-4" />}
 			</CommandItem>

ui/admin/app/components/composed/DataTable.tsx

@@ -161,6 +161,9 @@ export const DataTableFilter = ({
 			placeholder={field}
 			onChange={(option) => onSelect(option?.id ?? "")}
 			options={values}
+			classNames={{
+				command: "min-w-64",
+			}}
 		/>
 	);
 };

ui/admin/app/components/sidebar/Sidebar.tsx

@@ -51,6 +51,16 @@ const items = [
 		url: $path("/chat-threads"),
 		icon: MessageSquare,
 	},
+	{
+		title: "Tasks",
+		url: $path("/tasks"),
+		icon: PuzzleIcon,
+	},
+	{
+		title: "Task Runs",
+		url: $path("/task-runs"),
+		icon: CpuIcon,
+	},
 	{
 		title: "Tools",
 		url: $path("/tools"),
@@ -62,16 +72,6 @@ const items = [
 		icon: User,
 		requiresAuth: true,
 	},
-	{
-		title: "Tasks",
-		url: $path("/tasks"),
-		icon: PuzzleIcon,
-	},
-	{
-		title: "Task Runs",
-		url: $path("/task-runs"),
-		icon: CpuIcon,
-	},
 	{
 		title: "Model Providers",
 		url: $path("/model-providers"),

ui/admin/app/routes/_auth.task-runs._index.tsx

@@ -75,8 +75,21 @@ export default function TaskRuns() {
 		WorkflowService.getWorkflows
 	);
 
+	const getAgents = useSWR(...AgentService.getAgents.swr({}));
 	const getUsers = useSWR(UserService.getUsers.key(), UserService.getUsers);
 
+	const agentThreadMap = useMemo(() => {
+		const agentMap = new Map(getAgents.data?.map((agent) => [agent.id, agent]));
+		return new Map(
+			getThreads?.data
+				?.filter((thread) => thread.agentID)
+				.map((thread) => {
+					const agent = agentMap.get(thread.agentID!);
+					return [thread.id, agent?.name ?? "-"];
+				})
+		);
+	}, [getAgents.data, getThreads.data]);
+
 	const workflowMap = useMemo(
 		() =>
 			new Map(getWorkflows.data?.map((workflow) => [workflow.id, workflow])),
@@ -128,6 +141,15 @@ export default function TaskRuns() {
 		return filteredThreads;
 	}, [threads, taskId, userId]);
 
+	const namesCount = useMemo(() => {
+		return (
+			getWorkflows.data?.reduce<Record<string, number>>((acc, workflow) => {
+				acc[workflow.name] = (acc[workflow.name] || 0) + 1;
+				return acc;
+			}, {}) ?? {}
+		);
+	}, [getWorkflows.data]);
+
 	const itemsToDisplay = search
 		? data.filter(
 				(item) =>
@@ -171,6 +193,10 @@ export default function TaskRuns() {
 							getWorkflows.data?.map((workflow) => ({
 								id: workflow.id,
 								name: workflow.name,
+								sublabel:
+									namesCount?.[workflow.name] > 1
+										? agentThreadMap.get(workflow.threadID ?? "")
+										: "",
 							})) ?? []
 						}
 						onSelect={(value) => {

ui/admin/app/routes/_auth.tasks._index.tsx

@@ -143,6 +143,13 @@ export default function Tasks() {
 		return filteredTasks;
 	}, [tasks, search, agentId, userId, taskId]);
 
+	const namesCount = useMemo(() => {
+		return data.reduce<Record<string, number>>((acc, task) => {
+			acc[task.name] = (acc[task.name] || 0) + 1;
+			return acc;
+		}, {});
+	}, [data]);
+
 	return (
 		<div>
 			<div className="flex h-full flex-col gap-4 p-6">
@@ -183,9 +190,10 @@ export default function Tasks() {
 						key={column.id}
 						field="Task"
 						values={
-							getWorkflows.data?.map((workflow) => ({
-								id: workflow.id,
-								name: workflow.name,
+							data?.map((task) => ({
+								id: task.id,
+								name: task.name,
+								sublabel: namesCount[task.name] > 1 ? task.agent : "",
 							})) ?? []
 						}
 						onSelect={(value) => {