feat(ui): redo sidebar and homepage (#1610)

Author: PetrBulanek

apps/agentstack-ui/src/components/Sidebar/AgentsNav.tsx

@@ -6,10 +6,12 @@
 import { useMemo } from 'react';
 
 import { useModal } from '#contexts/Modal/index.tsx';
+import { useParamsFromUrl } from '#hooks/useParamsFromUrl.ts';
+import { useListAgents } from '#modules/agents/api/queries/useListAgents.ts';
+import { ListAgentsOrderBy } from '#modules/agents/api/types.ts';
 import { ImportAgentsModal } from '#modules/agents/components/import/ImportAgentsModal.tsx';
-import { useRecentlyAddedAgents } from '#modules/home/hooks/useRecentlyAddedAgents.ts';
 import { useUser } from '#modules/users/api/queries/useUser.ts';
-import { isUserAdmin } from '#modules/users/utils.ts';
+import { isUserAdminOrDev } from '#modules/users/utils.ts';
 import { routes } from '#utils/router.ts';
 
 import { NavGroup } from './NavGroup';
@@ -22,33 +24,35 @@ interface Props {
 export function AgentsNav({ className }: Props) {
   const { openModal } = useModal();
 
+  const { providerId: providerIdUrl } = useParamsFromUrl();
   const { data: user } = useUser();
-  const { data: agents, isLoading } = useRecentlyAddedAgents();
+  const { data: agents, isLoading } = useListAgents({ orderBy: ListAgentsOrderBy.Name });
 
-  const isAdmin = isUserAdmin(user);
+  const isAdminOrDev = isUserAdminOrDev(user);
 
   const action = useMemo(
     () =>
-      isAdmin
+      isAdminOrDev
         ? {
             label: 'Add new agent',
             onClick: () => openModal((props) => <ImportAgentsModal {...props} />),
           }
         : undefined,
-    [isAdmin, openModal],
+    [isAdminOrDev, openModal],
   );
 
   const items = useMemo(
     () =>
       agents?.map(({ name, provider: { id } }) => ({
         label: name,
         href: routes.agentRun({ providerId: id }),
+        isActive: providerIdUrl === id,
       })),
-    [agents],
+    [agents, providerIdUrl],
   );
 
   return (
-    <NavGroup heading="Agents added by me" className={className} action={action}>
+    <NavGroup heading="Agents" className={className} action={action}>
       <NavList items={items} isLoading={isLoading} skeletonCount={5} noItemsMessage="No agent added" />
     </NavGroup>
   );

apps/agentstack-ui/src/components/Sidebar/SidebarMainContent.module.scss

@@ -12,10 +12,9 @@
 }
 
 .agentsNav {
-  max-block-size: calc(70% - (var(--row-gap) / 2));
+  max-block-size: calc(50% - (var(--row-gap) / 2));
 }
 
-.sessions,
-.recentlyUsed {
+.sessions {
   flex: 1 1 0;
 }

apps/agentstack-ui/src/components/Sidebar/SidebarMainContent.tsx

@@ -5,36 +5,21 @@
 
 import clsx from 'clsx';
 
-import { useParamsFromUrl } from '#hooks/useParamsFromUrl.ts';
 import { SessionsNav } from '#modules/history/components/SessionsNav.tsx';
 
-import { AgentNav } from './AgentNav';
 import { AgentsNav } from './AgentsNav';
-import { RecentlyUsedAgentsNav } from './RecentlyUsedAgentsNav';
 import classes from './SidebarMainContent.module.scss';
 
 interface Props {
   className?: string;
 }
 
 export function SidebarMainContent({ className }: Props) {
-  const { providerId } = useParamsFromUrl();
-
   return (
     <div className={clsx(classes.root, className)}>
-      {providerId ? (
-        <>
-          <AgentNav providerId={providerId} />
-
-          <SessionsNav providerId={providerId} className={classes.sessions} />
-        </>
-      ) : (
-        <>
-          <AgentsNav className={classes.agentsNav} />
+      <AgentsNav className={classes.agentsNav} />
 
-          <RecentlyUsedAgentsNav className={classes.recentlyUsed} />
-        </>
-      )}
+      <SessionsNav className={classes.sessions} />
     </div>
   );
 }

apps/agentstack-ui/src/components/layouts/CommonHeader.tsx

@@ -9,45 +9,31 @@ import { Button } from '@carbon/react';
 
 import { AppName } from '#components/AppName/AppName.tsx';
 import { AppHeader } from '#components/layouts/AppHeader.tsx';
-import { Tooltip } from '#components/Tooltip/Tooltip.tsx';
 import { useModal } from '#contexts/Modal/index.tsx';
 import { ImportAgentsModal } from '#modules/agents/components/import/ImportAgentsModal.tsx';
 import { useUser } from '#modules/users/api/queries/useUser.ts';
-import { isUserAdmin } from '#modules/users/utils.ts';
+import { isUserAdminOrDev } from '#modules/users/utils.ts';
 
 import classes from './CommonHeader.module.scss';
 
 export function CommonHeader() {
   const { openModal } = useModal();
   const { data: user } = useUser();
 
-  const isAdmin = isUserAdmin(user);
-
-  const addNewAgentButton = (
-    <Button
-      renderIcon={Add}
-      size="sm"
-      disabled={!isAdmin}
-      onClick={() => openModal((props) => <ImportAgentsModal {...props} />)}
-    >
-      Add new agent
-    </Button>
-  );
+  const isAdminOrDev = isUserAdminOrDev(user);
 
   return (
     <AppHeader>
       <div className={classes.root}>
         <AppName />
 
-        <div className={classes.right}>
-          {isAdmin ? (
-            addNewAgentButton
-          ) : (
-            <Tooltip content="Adding agents requires elevated permissions." asChild placement="bottom-end">
-              {addNewAgentButton}
-            </Tooltip>
-          )}
-        </div>
+        {isAdminOrDev && (
+          <div className={classes.right}>
+            <Button renderIcon={Add} size="sm" onClick={() => openModal((props) => <ImportAgentsModal {...props} />)}>
+              Add new agent
+            </Button>
+          </div>
+        )}
       </div>
     </AppHeader>
   );

apps/agentstack-ui/src/modules/history/components/SessionItem.module.scss

@@ -15,14 +15,15 @@
 
 .link {
   @include link-mask();
-  @include line-clamp();
   min-inline-size: 0;
   flex-grow: 1;
   text-decoration: none;
   font-size: rem(14px);
   line-height: math.div(18, 14);
   color: $text-dark;
-  display: block;
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-02;
   &::before {
     border-radius: $border-radius;
     transition: background-color $duration-fast-01 motion(entrance, productive);
@@ -45,6 +46,17 @@
   }
 }
 
+.heading {
+  @include line-clamp();
+}
+
+.subHeading {
+  @include line-clamp();
+  font-size: rem(12px);
+  line-height: math.div(14, 12);
+  color: $text-secondary;
+}
+
 .options {
   flex-shrink: 0;
   display: none;
@@ -75,6 +87,6 @@
 .skeleton {
   &:global(.cds--btn.cds--skeleton) {
     inline-size: 100%;
-    min-block-size: rem(32px);
+    min-block-size: rem(50px);
   }
 }

apps/agentstack-ui/src/modules/history/components/SessionItem.tsx

@@ -18,10 +18,11 @@ export interface SessionItem {
   contextId: string;
   providerId: string;
   heading: string;
+  subHeading?: string;
   isActive?: boolean;
 }
 
-export function SessionItem({ contextId, providerId, heading, isActive }: SessionItem) {
+export function SessionItem({ contextId, providerId, heading, subHeading, isActive }: SessionItem) {
   const router = useRouter();
   const [optionsOpen, setOptionsOpen] = useState(false);
 
@@ -41,7 +42,9 @@ export function SessionItem({ contextId, providerId, heading, isActive }: Sessio
       })}
     >
       <Link href={routes.agentRun({ providerId, contextId })} className={classes.link}>
-        {heading}
+        <span className={classes.heading}>{heading}</span>
+
+        {subHeading && <span className={classes.subHeading}>{subHeading}</span>}
       </Link>
 
       <div className={classes.options}>

apps/agentstack-ui/src/modules/history/components/SessionsNav.tsx

@@ -8,52 +8,60 @@ import { useMemo } from 'react';
 import { NavGroup } from '#components/Sidebar/NavGroup.tsx';
 import { useFetchNextPage } from '#hooks/useFetchNextPage.ts';
 import { useParamsFromUrl } from '#hooks/useParamsFromUrl.ts';
+import { useListAgents } from '#modules/agents/api/queries/useListAgents.ts';
 import { LIST_CONTEXTS_DEFAULT_QUERY } from '#modules/platform-context/api/constants.ts';
 import { useListContexts } from '#modules/platform-context/api/queries/useListContexts.ts';
 import { isNotNull } from '#utils/helpers.ts';
 
 import { SessionsList } from './SessionsList';
 
 interface Props {
-  providerId: string;
   className?: string;
 }
 
-export function SessionsNav({ providerId, className }: Props) {
+export function SessionsNav({ className }: Props) {
   const { contextId: contextIdUrl } = useParamsFromUrl();
+
+  const { data: agents, isLoading: isAgentsLoading } = useListAgents();
   const { data, isLoading, isFetching, hasNextPage, fetchNextPage } = useListContexts({
-    query: {
-      ...LIST_CONTEXTS_DEFAULT_QUERY,
-      provider_id: providerId,
-    },
+    query: LIST_CONTEXTS_DEFAULT_QUERY,
   });
   const { ref: fetchNextPageRef } = useFetchNextPage({ isFetching, hasNextPage, fetchNextPage });
 
-  const items = useMemo(
-    () =>
-      data
-        ?.map(({ id: contextId, created_at, metadata }) => {
-          if (!contextId) {
-            return null;
-          }
-
-          const heading = (metadata?.title || created_at) ?? contextId;
-          const isActive = contextIdUrl === contextId;
-
-          return {
-            contextId,
-            providerId,
-            heading,
-            isActive,
-          };
-        })
-        .filter(isNotNull),
-    [data, contextIdUrl, providerId],
-  );
+  const items = useMemo(() => {
+    if (!agents) {
+      return undefined;
+    }
+
+    const agentsMap = new Map(agents.map((agent) => [agent.provider.id, agent]));
+
+    return data
+      ?.map(({ id: contextId, created_at, metadata, provider_id }) => {
+        const providerId = provider_id ?? metadata?.provider_id;
+        const agent = providerId ? agentsMap.get(providerId) : undefined;
+
+        if (!providerId || !contextId || !agent) {
+          return null;
+        }
+
+        const heading = (metadata?.title || created_at) ?? contextId;
+        const subHeading = agent.name;
+        const isActive = contextIdUrl === contextId;
+
+        return {
+          contextId,
+          providerId,
+          heading,
+          subHeading,
+          isActive,
+        };
+      })
+      .filter(isNotNull);
+  }, [data, agents, contextIdUrl]);
 
   return (
     <NavGroup heading="Sessions" className={className}>
-      <SessionsList items={items} isLoading={isLoading} />
+      <SessionsList items={items} isLoading={isLoading || isAgentsLoading} />
 
       {hasNextPage && <div ref={fetchNextPageRef} />}
     </NavGroup>

apps/agentstack-ui/src/modules/home/components/DiscoverAgentsList.tsx

@@ -10,16 +10,13 @@ import { ListAgentsOrderBy } from '#modules/agents/api/types.ts';
 import { AgentCardsList } from '#modules/agents/components/cards/AgentCardsList.tsx';
 import type { ListProvidersResponse } from '#modules/providers/api/types.ts';
 
-import { USER_NOT_OWNED_AGENTS_LIST_PARAMS } from '../constants';
-
 interface Props {
   initialData?: ListProvidersResponse;
 }
 
 export function DiscoverAgentsList({ initialData }: Props) {
   const { data: agents, isLoading } = useListAgents({
-    ...USER_NOT_OWNED_AGENTS_LIST_PARAMS,
-    orderBy: ListAgentsOrderBy.CreatedAt,
+    orderBy: ListAgentsOrderBy.Name,
     initialData,
   });
 

apps/agentstack-ui/src/modules/home/components/HomeHeading.tsx

@@ -14,10 +14,5 @@ export function HomeHeading() {
     config: { appName },
   } = useApp();
 
-  return (
-    <h1 className={classes.root}>
-      Welcome to {appName}.<br />
-      No&nbsp;agents yet —&nbsp;discover what’s possible.
-    </h1>
-  );
+  return <h1 className={classes.root}>Welcome to {appName}.</h1>;
 }

apps/agentstack-ui/src/modules/home/components/HomeView.tsx

@@ -7,31 +7,19 @@ import { Container } from '#components/layouts/Container.tsx';
 import { MainContent } from '#components/layouts/MainContent.tsx';
 import { fetchProviders } from '#modules/providers/api/index.ts';
 
-import { USER_NOT_OWNED_AGENTS_LIST_PARAMS, USER_OWNED_AGENTS_LIST_PARAMS } from '../constants';
 import { DiscoverAgentsList } from './DiscoverAgentsList';
 import { HomeHeading } from './HomeHeading';
 import classes from './HomeView.module.scss';
-import { RecentlyAddedAgentsList } from './RecentlyAddedAgentsList';
-import { RecentlyUsedAgentsList } from './RecentlyUsedAgentsList';
 
 export async function HomeView() {
-  const [userOwned, userNotOwned] = await Promise.all([
-    fetchProviders(USER_OWNED_AGENTS_LIST_PARAMS),
-    fetchProviders(USER_NOT_OWNED_AGENTS_LIST_PARAMS),
-  ]);
-
-  const hasUserOwnedAgents = userOwned && userOwned.total_count > 0;
+  const initialData = await fetchProviders();
 
   return (
     <MainContent spacing="sm">
       <Container className={classes.root}>
-        {!hasUserOwnedAgents && <HomeHeading />}
-
-        <RecentlyAddedAgentsList initialData={userOwned} />
-
-        <RecentlyUsedAgentsList initialData={userNotOwned} />
+        <HomeHeading />
 
-        <DiscoverAgentsList initialData={userNotOwned} />
+        <DiscoverAgentsList initialData={initialData} />
       </Container>
     </MainContent>
   );