@agent-native/dispatch 0.13.13 → 0.14.1

package/src/components/layout/Layout.tsx

@@ -16,6 +16,7 @@ import {
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { InvitationBanner, OrgSwitcher } from "@agent-native/core/client/org";
 import {
+  IconActivity,
   IconArrowUpRight,
   IconApps,
   IconBrain,
@@ -60,6 +61,7 @@ import {
 } from "../ui/dropdown-menu";
 import { Input } from "../ui/input";
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "../ui/sheet";
+import { Skeleton } from "../ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Header } from "./Header";
 import { HeaderActionsProvider } from "./HeaderActions";
@@ -113,37 +115,65 @@ const PRIMARY_NAV_ITEMS = [
     icon: IconApps,
     section: "primary",
   },
+] as const satisfies readonly DispatchNavItem[];
+
+const OPERATIONS_NAV_ITEMS = [
+  {
+    id: "operations",
+    to: "/operations",
+    label: "Operations",
+    icon: IconActivity,
+    section: "operations",
+  },
   {
     id: "metrics",
     to: "/metrics",
     label: "Metrics",
     icon: IconChartBar,
-    section: "primary",
+    section: "operations",
   },
   {
-    id: "vault",
-    to: "/vault",
-    label: "Vault",
-    icon: IconKey,
-    section: "primary",
+    id: "automations",
+    to: "/automations",
+    label: "Automations",
+    icon: IconSettingsAutomation,
+    section: "operations",
+  },
+  {
+    id: "approvals",
+    to: "/approvals",
+    label: "Approvals",
+    icon: IconShieldCheck,
+    section: "operations",
+  },
+  {
+    id: "destinations",
+    to: "/destinations",
+    label: "Destinations",
+    icon: IconArrowUpRight,
+    section: "operations",
   },
   {
     id: "integrations",
     to: "/integrations",
     label: "Integrations",
     icon: IconPuzzle,
-    section: "primary",
+    section: "operations",
+  },
+  {
+    id: "vault",
+    to: "/vault",
+    label: "Vault",
+    icon: IconKey,
+    section: "operations",
   },
   {
     id: "agents",
     to: "/agents",
     label: "Agents",
     icon: IconPlugConnected,
-    section: "primary",
+    section: "operations",
   },
-] as const satisfies readonly DispatchNavItem[];
-
-const OPERATIONS_NAV_ITEMS = [
   {
     id: "workspace",
     to: "/workspace",
@@ -151,6 +181,16 @@ const OPERATIONS_NAV_ITEMS = [
     icon: IconLayersSubtract,
     section: "operations",
   },
+  {
+    id: "settings",
+    to: "/settings",
+    label: "Settings",
+    icon: IconSettings,
+    section: "operations",
+  },
+] as const satisfies readonly DispatchNavItem[];
+
+const ADVANCED_NAV_ITEMS = [
   {
     id: "messaging",
     to: "/messaging",
@@ -158,13 +198,6 @@ const OPERATIONS_NAV_ITEMS = [
     icon: IconBrandTelegram,
     section: "operations",
   },
-  {
-    id: "destinations",
-    to: "/destinations",
-    label: "Destinations",
-    icon: IconArrowUpRight,
-    section: "operations",
-  },
   {
     id: "identities",
     to: "/identities",
@@ -172,20 +205,6 @@ const OPERATIONS_NAV_ITEMS = [
     icon: IconFingerprint,
     section: "operations",
   },
-  {
-    id: "approvals",
-    to: "/approvals",
-    label: "Approvals",
-    icon: IconShieldCheck,
-    section: "operations",
-  },
-  {
-    id: "automations",
-    to: "/automations",
-    label: "Automations",
-    icon: IconSettingsAutomation,
-    section: "operations",
-  },
   {
     id: "audit",
     to: "/audit",
@@ -207,13 +226,6 @@ const OPERATIONS_NAV_ITEMS = [
     icon: IconMessages,
     section: "operations",
   },
-  {
-    id: "settings",
-    to: "/settings",
-    label: "Settings",
-    icon: IconSettings,
-    section: "operations",
-  },
 ] as const satisfies readonly DispatchNavItem[];
 
 const EMPTY_NAV_ITEMS: readonly DispatchNavItem[] = [];
@@ -338,6 +350,7 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
   const {
     threads,
     activeThreadId,
+    isLoading: chatsLoading,
     createThread,
     switchThread,
     renameThread,
@@ -439,134 +452,123 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
   }
 
   return (
-    <div className="mt-2 border-s border-sidebar-border/70 ps-3">
-      <div className="mb-1 flex h-7 items-center gap-2 pe-1">
-        <div className="min-w-0 flex-1 text-xs font-medium text-sidebar-foreground/70">
-          {t("dispatch.sidebar.chats")}
-        </div>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              onClick={handleNewChat}
-              className="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-              aria-label={t("dispatch.sidebar.newDispatchChat")}
-            >
-              <IconPlus className="size-3.5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent>{t("dispatch.sidebar.newChat")}</TooltipContent>
-        </Tooltip>
-      </div>
-      <div className="grid gap-0.5">
-        {visibleThreads.length > 0 ? (
-          visibleThreads.map((thread) => {
-            const localPathname = localDispatchPath(location.pathname);
-            const isActive =
-              thread.id ===
-              (threadIdFromPath(localPathname) ??
-                (localPathname === "/chat" ? null : activeThreadId));
-            const isRenaming = thread.id === renamingThreadId;
-            return (
-              <div
-                key={thread.id}
-                className={cn(
-                  "group flex h-8 min-w-0 items-center rounded-md text-sm transition-colors",
-                  isActive
-                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                    : "text-sidebar-foreground/80 hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
-                )}
+    <div className="ms-4 min-w-0 space-y-0.5">
+      {chatsLoading &&
+        visibleThreads.length === 0 &&
+        Array.from({ length: 3 }).map((_, index) => (
+          <div
+            key={`chat-skeleton-${index}`}
+            className="flex items-center gap-2 px-3 py-1"
+          >
+            <Skeleton className="size-3.5 shrink-0 rounded-sm" />
+            <Skeleton className="h-3 w-3/4 rounded" />
+          </div>
+        ))}
+      {visibleThreads.map((thread) => {
+        const localPathname = localDispatchPath(location.pathname);
+        const isActive =
+          thread.id ===
+          (threadIdFromPath(localPathname) ??
+            (localPathname === "/chat" ? null : activeThreadId));
+        const isRenaming = thread.id === renamingThreadId;
+        const title = threadTitle(thread, t("dispatch.sidebar.newChat"));
+        return (
+          <div
+            key={thread.id}
+            className={cn(
+              "group/item relative flex min-w-0 items-center rounded-lg transition-colors",
+              isActive
+                ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
+            )}
+          >
+            {isRenaming ? (
+              <form
+                onSubmit={handleRenameSubmit}
+                className="flex min-w-0 flex-1 items-center px-1"
               >
-                {isRenaming ? (
-                  <form
-                    onSubmit={handleRenameSubmit}
-                    className="flex h-full min-w-0 flex-1 items-center px-1.5"
-                  >
-                    <Input
-                      ref={renameInputRef}
-                      value={renameDraft}
-                      onChange={(event) => setRenameDraft(event.target.value)}
-                      onBlur={() => void commitRenameThread()}
-                      onKeyDown={(event) => {
-                        if (event.key === "Escape") {
-                          event.preventDefault();
-                          cancelRenameThread();
-                        }
-                      }}
-                      maxLength={160}
-                      aria-label={t("dispatch.sidebar.renameThread", {
-                        title: threadTitle(
-                          thread,
-                          t("dispatch.sidebar.newChat"),
-                        ),
-                      })}
-                      className="h-6 min-w-0 rounded-sm border-sidebar-border bg-background px-1.5 text-xs"
-                    />
-                  </form>
-                ) : (
-                  <>
+                <Input
+                  ref={renameInputRef}
+                  value={renameDraft}
+                  onChange={(event) => setRenameDraft(event.target.value)}
+                  onBlur={() => void commitRenameThread()}
+                  onKeyDown={(event) => {
+                    if (event.key === "Escape") {
+                      event.preventDefault();
+                      cancelRenameThread();
+                    }
+                  }}
+                  maxLength={160}
+                  aria-label={t("dispatch.sidebar.renameThread", { title })}
+                  className="h-6 min-w-0 rounded-sm border-sidebar-border bg-background px-1.5 text-xs"
+                />
+              </form>
+            ) : (
+              <>
+                <Tooltip>
+                  <TooltipTrigger asChild>
                     <button
                       type="button"
                       onClick={() => openThread(thread.id)}
-                      className="flex h-full min-w-0 flex-1 cursor-pointer items-center px-2 text-start outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="min-w-0 flex-1 cursor-pointer px-2 py-1.5 pe-12 text-start text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
                     >
-                      <span className="min-w-0 flex-1 truncate">
-                        {threadTitle(thread, t("dispatch.sidebar.newChat"))}
-                      </span>
+                      <span className="block min-w-0 truncate">{title}</span>
                     </button>
-                    <div className="relative flex size-7 shrink-0 items-center justify-end pe-1">
-                      <span className="text-[11px] text-sidebar-foreground/50 transition-opacity group-hover:opacity-0 group-focus-within:opacity-0">
-                        {isActive
-                          ? ""
-                          : formatThreadAge(
-                              threadUpdatedAt(thread),
-                              formatDate,
-                            )}
-                      </span>
-                      <DropdownMenu>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">{title}</TooltipContent>
+                </Tooltip>
+                <div className="pointer-events-none absolute end-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5">
+                  <span className="pointer-events-none pe-1 text-[11px] text-muted-foreground/60 transition-opacity group-hover/item:opacity-0 group-focus-within/item:opacity-0">
+                    {isActive
+                      ? ""
+                      : formatThreadAge(threadUpdatedAt(thread), formatDate)}
+                  </span>
+                  <DropdownMenu>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
                         <DropdownMenuTrigger asChild>
                           <button
                             type="button"
                             aria-label={t("dispatch.sidebar.chatOptions", {
-                              title: threadTitle(
-                                thread,
-                                t("dispatch.sidebar.newChat"),
-                              ),
+                              title,
                             })}
-                            className="absolute end-1 flex size-6 cursor-pointer items-center justify-center rounded-md text-sidebar-foreground/65 opacity-0 transition-opacity hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
+                            className="pointer-events-auto rounded p-0.5 text-muted-foreground/50 opacity-0 transition-all hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/item:opacity-100 group-focus-within/item:opacity-100 data-[state=open]:opacity-100 data-[state=open]:text-foreground"
                           >
-                            <IconDots className="size-4" />
+                            <IconDots className="size-3" />
                           </button>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent
-                          align="end"
-                          side="right"
-                          sideOffset={6}
-                        >
-                          <DropdownMenuItem
-                            onSelect={() => startRenameThread(thread)}
-                          >
-                            <IconEdit className="size-4" />
-                            {t("dispatch.sidebar.renameChat")}
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })
-        ) : (
-          <button
-            type="button"
-            onClick={handleNewChat}
-            className="flex h-8 cursor-pointer items-center rounded-md px-2 text-start text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground"
-          >
-            <span className="truncate">{t("dispatch.sidebar.newChat")}</span>
-          </button>
-        )}
-      </div>
+                      </TooltipTrigger>
+                      <TooltipContent side="right">
+                        {t("dispatch.sidebar.chatOptions", { title })}
+                      </TooltipContent>
+                    </Tooltip>
+                    <DropdownMenuContent
+                      align="start"
+                      side="right"
+                      className="w-44"
+                    >
+                      <DropdownMenuItem
+                        onSelect={() => startRenameThread(thread)}
+                      >
+                        <IconEdit className="size-3.5" />
+                        {t("dispatch.sidebar.renameChat")}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </>
+            )}
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        onClick={() => void handleNewChat()}
+        className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-xs text-muted-foreground/60 transition-colors hover:bg-sidebar-accent/50 hover:text-foreground"
+      >
+        <IconPlus className="size-3 shrink-0" />
+        <span className="truncate">{t("dispatch.sidebar.newChat")}</span>
+      </button>
     </div>
   );
 }
@@ -604,7 +606,7 @@ export function NavContent({
     ...navItemsForSection(extensionNavItems, "operations"),
   ];
   const localPathname = localDispatchPath(location.pathname);
-  const operationsOpen = operationsNavItems.some((item) =>
+  const advancedOpen = ADVANCED_NAV_ITEMS.some((item) =>
     navItemMatchesPath(item, localPathname),
   );
   const navLabel = (item: DispatchNavItem) => {
@@ -720,36 +722,27 @@ export function NavContent({
         <div
           className={cn(
             "flex items-center",
-            collapsed ? "justify-center" : "gap-3",
+            collapsed ? "justify-center" : "gap-2",
           )}
         >
           {!collapsed && (
             <>
-              <div className="flex h-9 w-9 items-center justify-center rounded-xl border bg-card text-foreground">
-                <img
-                  src={appPath("/agent-native-icon-light.svg")}
-                  alt=""
-                  aria-hidden="true"
-                  className="block h-4 w-auto shrink-0 dark:hidden"
-                />
-                <img
-                  src={appPath("/agent-native-icon-dark.svg")}
-                  alt=""
-                  aria-hidden="true"
-                  className="hidden h-4 w-auto shrink-0 dark:block"
-                />
-              </div>
+              <img
+                src={appPath("/agent-native-icon-light.svg")}
+                alt=""
+                aria-hidden="true"
+                className="block h-5 w-auto shrink-0 dark:hidden"
+              />
+              <img
+                src={appPath("/agent-native-icon-dark.svg")}
+                alt=""
+                aria-hidden="true"
+                className="hidden h-5 w-auto shrink-0 dark:block"
+              />
               <div className="min-w-0 flex-1">
-                <div className="truncate text-sm font-semibold text-foreground">
+                <div className="truncate text-lg font-bold tracking-tight text-foreground">
                   {workspaceLabel ?? "Dispatch"}
                 </div>
-                <div className="truncate text-xs text-muted-foreground">
-                  {workspaceLabel
-                    ? t("dispatch.sidebar.workspaceSubtitle", {
-                        count: ws?.appCount ?? 0,
-                      })
-                    : t("dispatch.sidebar.workspaceControlPlane")}
-                </div>
               </div>
             </>
           )}
@@ -791,30 +784,44 @@ export function NavContent({
               collapsed && "flex flex-col items-center",
             )}
           >
-            {(collapsed
-              ? [...primaryNavItems, ...operationsNavItems]
-              : primaryNavItems
-            ).map(renderNavItem)}
+            {primaryNavItems.map(renderNavItem)}
           </ul>
-        </nav>
 
-        {!collapsed ? (
-          <div className="mt-auto shrink-0">
-            <div className="px-2 py-2">
-              <details className="group" open={operationsOpen}>
-                <summary className="flex h-8 cursor-pointer list-none items-center justify-between rounded-md px-2 text-xs font-medium uppercase text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&::-webkit-details-marker]:hidden">
-                  <span>{t("dispatch.nav.operations")}</span>
+          {collapsed ? (
+            <ul className="mt-2 flex flex-col items-center space-y-0.5">
+              {[...operationsNavItems, ...ADVANCED_NAV_ITEMS].map(
+                renderNavItem,
+              )}
+            </ul>
+          ) : (
+            <div className="mt-5">
+              <p className="px-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-sidebar-foreground/45">
+                {t("dispatch.nav.operate", { defaultValue: "Operate" })}
+              </p>
+              <ul className="space-y-0.5">
+                {operationsNavItems.map(renderNavItem)}
+              </ul>
+
+              <details className="group mt-3" open={advancedOpen}>
+                <summary className="flex h-8 cursor-pointer list-none items-center justify-between rounded-md px-2 text-xs font-medium text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&::-webkit-details-marker]:hidden">
+                  <span>
+                    {t("dispatch.nav.advanced", { defaultValue: "Advanced" })}
+                  </span>
                   <IconChevronDown
                     size={14}
                     className="transition-transform group-open:rotate-180"
                   />
                 </summary>
                 <ul className="mt-1 space-y-0.5">
-                  {operationsNavItems.map(renderNavItem)}
+                  {ADVANCED_NAV_ITEMS.map(renderNavItem)}
                 </ul>
               </details>
             </div>
+          )}
+        </nav>
 
+        {!collapsed ? (
+          <div className="mt-auto shrink-0">
             <div className="px-2 py-1">
               <ExtensionsSidebarSection />
             </div>