{tabs.map((tab) => {
const isActive = matchRoute({
to: tab.to,
diff --git a/interface/src/components/SettingSectionNav.test.tsx b/interface/src/components/SettingSectionNav.test.tsx
new file mode 100644
index 000000000..c3b2ff7a7
--- /dev/null
+++ b/interface/src/components/SettingSectionNav.test.tsx
@@ -0,0 +1,102 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { SettingSectionNav } from "./SettingSectionNav";
+
+const singleGroup = [
+ {
+ label: "Settings",
+ sections: [
+ { id: "a", label: "Section A" },
+ { id: "b", label: "Section B" },
+ { id: "c", label: "Section C" },
+ ],
+ },
+];
+
+const multiGroup = [
+ {
+ label: "Group One",
+ sections: [
+ { id: "a", label: "Section A" },
+ { id: "b", label: "Section B" },
+ ],
+ },
+ {
+ label: "Group Two",
+ sections: [
+ { id: "c", label: "Section C" },
+ { id: "d", label: "Section D" },
+ { id: "e", label: "Section E" },
+ ],
+ },
+];
+
+describe("SettingSectionNav", () => {
+ it("desktop sidebar div has hidden md:flex classes", () => {
+ const { container } = render(
+
,
+ );
+ const desktopDiv = container.children[0] as HTMLElement;
+ expect(desktopDiv).toHaveClass("hidden");
+ expect(desktopDiv).toHaveClass("md:flex");
+ });
+
+ it("mobile tab bar div has flex md:hidden classes", () => {
+ const { container } = render(
+
,
+ );
+ const mobileDiv = container.children[1] as HTMLElement;
+ expect(mobileDiv).toHaveClass("flex");
+ expect(mobileDiv).toHaveClass("md:hidden");
+ });
+
+ it("renders correct number of buttons for a single-group config", () => {
+ const { container } = render(
+
,
+ );
+ const desktopDiv = container.children[0] as HTMLElement;
+ const mobileDiv = container.children[1] as HTMLElement;
+ expect(desktopDiv.querySelectorAll("button")).toHaveLength(3);
+ expect(mobileDiv.querySelectorAll("button")).toHaveLength(3);
+ });
+
+ it("renders correct number of buttons for a multi-group config", () => {
+ const { container } = render(
+
,
+ );
+ const desktopDiv = container.children[0] as HTMLElement;
+ const mobileDiv = container.children[1] as HTMLElement;
+ expect(desktopDiv.querySelectorAll("button")).toHaveLength(5);
+ expect(mobileDiv.querySelectorAll("button")).toHaveLength(5);
+ });
+
+ it("group separator rendered in mobile bar when multiple groups provided", () => {
+ const { container } = render(
+
,
+ );
+ const mobileDiv = container.children[1] as HTMLElement;
+ const separators = mobileDiv.querySelectorAll("div.w-px");
+ expect(separators).toHaveLength(1);
+ });
+
+ it("no separator rendered in mobile bar for single group", () => {
+ const { container } = render(
+
,
+ );
+ const mobileDiv = container.children[1] as HTMLElement;
+ const separators = mobileDiv.querySelectorAll("div.w-px");
+ expect(separators).toHaveLength(0);
+ });
+
+ it("active section button has active styling class", () => {
+ const { container } = render(
+
,
+ );
+ const desktopDiv = container.children[0] as HTMLElement;
+ const desktopButtons = desktopDiv.querySelectorAll("button");
+ expect(desktopButtons[1]).toHaveClass("bg-app-darkBox");
+ const mobileDiv = container.children[1] as HTMLElement;
+ const mobileButtons = mobileDiv.querySelectorAll("button");
+ expect(mobileButtons[1]).toHaveClass("text-ink");
+ });
+});
diff --git a/interface/src/components/SettingSectionNav.tsx b/interface/src/components/SettingSectionNav.tsx
new file mode 100644
index 000000000..7fb67dfbc
--- /dev/null
+++ b/interface/src/components/SettingSectionNav.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import {SettingSidebarButton} from "@/ui";
+
+interface SectionGroup {
+ label: string;
+ sections: {
+ id: string;
+ label: string;
+ badge?: React.ReactNode;
+ }[];
+}
+
+interface SettingSectionNavProps {
+ groups: SectionGroup[];
+ activeSection: string;
+ onSectionChange: (id: string) => void;
+}
+
+export function SettingSectionNav({groups, activeSection, onSectionChange}: SettingSectionNavProps) {
+ return (
+ <>
+ {/* Desktop sidebar */}
+
+ {groups.map((group) => (
+
+
+
+ {group.label}
+
+
+
+ {group.sections.map((section) => (
+ onSectionChange(section.id)}
+ active={activeSection === section.id}
+ >
+ {section.label}
+ {section.badge}
+
+ ))}
+
+
+ ))}
+
+
+ {/* Mobile tab bar */}
+
+ {groups.map((group, groupIndex) => (
+
+ {groupIndex > 0 && (
+
+ )}
+ {group.sections.map((section) => {
+ const isActive = activeSection === section.id;
+ return (
+
+ );
+ })}
+
+ ))}
+
+
+ );
+}
diff --git a/interface/src/components/Sidebar.test.tsx b/interface/src/components/Sidebar.test.tsx
new file mode 100644
index 000000000..9f53d5e2b
--- /dev/null
+++ b/interface/src/components/Sidebar.test.tsx
@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { Sidebar } from "./Sidebar";
+
+vi.mock("framer-motion", () => ({
+ motion: {
+ nav: ({
+ children,
+ className,
+ initial,
+ }: {
+ children: React.ReactNode;
+ className?: string;
+ initial?: { width?: number };
+ animate?: unknown;
+ transition?: unknown;
+ }) => (
+
+ ),
+ },
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+ useMatchRoute: () => () => false,
+ Link: ({
+ children,
+ className,
+ }: {
+ children: React.ReactNode;
+ to?: string;
+ params?: unknown;
+ className?: string;
+ style?: unknown;
+ title?: string;
+ }) =>
{children},
+}));
+
+vi.mock("@tanstack/react-query", () => ({
+ useQuery: () => ({ data: undefined }),
+}));
+
+vi.mock("@dnd-kit/core", () => ({
+ DndContext: ({ children }: { children: React.ReactNode }) => <>{children},
+ closestCenter: vi.fn(),
+ KeyboardSensor: vi.fn(),
+ PointerSensor: vi.fn(),
+ useSensor: vi.fn(),
+ useSensors: vi.fn(() => []),
+}));
+
+vi.mock("@dnd-kit/sortable", () => ({
+ SortableContext: ({ children }: { children: React.ReactNode }) => (
+ <>{children}
+ ),
+ sortableKeyboardCoordinates: vi.fn(),
+ arrayMove: vi.fn(),
+ useSortable: () => ({
+ attributes: {},
+ listeners: {},
+ setNodeRef: vi.fn(),
+ transform: null,
+ transition: null,
+ isDragging: false,
+ }),
+ verticalListSortingStrategy: vi.fn(),
+}));
+
+vi.mock("@dnd-kit/utilities", () => ({
+ CSS: { Transform: { toString: vi.fn(() => "") } },
+}));
+
+vi.mock("@/api/client", () => ({
+ api: { agents: vi.fn(), channels: vi.fn() },
+ BASE_PATH: "",
+}));
+
+vi.mock("@/hooks/useAgentOrder", () => ({
+ useAgentOrder: () => [[], vi.fn()],
+}));
+
+vi.mock("@/ui", () => ({
+ Button: ({
+ children,
+ onClick,
+ }: {
+ children: React.ReactNode;
+ onClick?: () => void;
+ variant?: string;
+ size?: string;
+ className?: string;
+ }) =>
,
+}));
+
+vi.mock("@hugeicons/core-free-icons", () => ({
+ ArrowLeft01Icon: vi.fn(),
+ DashboardSquare01Icon: vi.fn(),
+ Settings01Icon: vi.fn(),
+}));
+
+vi.mock("@hugeicons/react", () => ({
+ HugeiconsIcon: ({
+ icon,
+ size,
+ }: {
+ icon: unknown;
+ size?: number;
+ className?: string;
+ }) =>
,
+}));
+
+vi.mock("@/components/CreateAgentDialog", () => ({
+ CreateAgentDialog: ({
+ open,
+ onOpenChange,
+ }: {
+ open: boolean;
+ onOpenChange: (v: boolean) => void;
+ }) =>
+ open ?
onOpenChange(false)} /> : null,
+}));
+
+describe("Sidebar", () => {
+ it("root nav has shrink-0 class when collapsed", () => {
+ const { container } = render(
+
,
+ );
+ const nav = container.querySelector("nav");
+ expect(nav).toHaveClass("shrink-0");
+ });
+
+ it("root nav has shrink-0 class when expanded", () => {
+ const { container } = render(
+
,
+ );
+ const nav = container.querySelector("nav");
+ expect(nav).toHaveClass("shrink-0");
+ });
+
+ it("root nav initial width is 56 when collapsed", () => {
+ const { container } = render(
+
,
+ );
+ const nav = container.querySelector("nav") as HTMLElement;
+ expect(nav.style.width).toBe("56px");
+ });
+
+ it("root nav initial width is 224 when expanded", () => {
+ const { container } = render(
+
,
+ );
+ const nav = container.querySelector("nav") as HTMLElement;
+ expect(nav.style.width).toBe("224px");
+ });
+});
diff --git a/interface/src/components/Sidebar.tsx b/interface/src/components/Sidebar.tsx
index ef51575b8..7332c1b1d 100644
--- a/interface/src/components/Sidebar.tsx
+++ b/interface/src/components/Sidebar.tsx
@@ -124,7 +124,7 @@ export function Sidebar({ liveStates, collapsed, onToggle }: SidebarProps) {
const agents = agentsData?.agents ?? [];
const channels = channelsData?.channels ?? [];
-
+
const agentIds = useMemo(() => agents.map((a) => a.id), [agents]);
const [agentOrder, setAgentOrder] = useAgentOrder(agentIds);
@@ -167,7 +167,8 @@ export function Sidebar({ liveStates, collapsed, onToggle }: SidebarProps) {
return (
diff --git a/interface/src/router.tsx b/interface/src/router.tsx
index de3f4a940..2e2890ad2 100644
--- a/interface/src/router.tsx
+++ b/interface/src/router.tsx
@@ -36,7 +36,7 @@ function RootLayout() {
collapsed={sidebarCollapsed}
onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
/>
-
+
diff --git a/interface/src/routes/AgentConfig.tsx b/interface/src/routes/AgentConfig.tsx
index 8655eb339..46a1809f0 100644
--- a/interface/src/routes/AgentConfig.tsx
+++ b/interface/src/routes/AgentConfig.tsx
@@ -1,7 +1,8 @@
import { useCallback, useEffect, useState, useRef } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api, type AgentConfigResponse, type AgentConfigUpdateRequest } from "@/api/client";
-import { Button, SettingSidebarButton, Input, TextArea, Toggle, NumberStepper, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, cx } from "@/ui";
+import { Button, Input, TextArea, Toggle, NumberStepper, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, cx } from "@/ui";
+import {SettingSectionNav} from "@/components/SettingSectionNav";
import { ModelSelect } from "@/components/ModelSelect";
import { Markdown } from "@/components/Markdown";
import { motion, AnimatePresence } from "framer-motion";
@@ -146,51 +147,30 @@ export function AgentConfig({ agentId }: AgentConfigProps) {
const isIdentitySection = active.group === "identity";
return (
-
- {/* Sidebar */}
-
- {/* Identity Group */}
-
- Identity
-
-
- {SECTIONS.filter((s) => s.group === "identity").map((section) => {
- const isActive = activeSection === section.id;
- const hasContent = !!getIdentityField(identityQuery.data ?? { soul: null, identity: null, user: null }, section.id)?.trim();
- return (
- handleSectionChange(section.id)}
- active={isActive}
- >
- {section.label}
- {!hasContent && (
- empty
- )}
-
- );
- })}
-
-
- {/* Config Group */}
-
- Configuration
-
-
- {SECTIONS.filter((s) => s.group === "config").map((section) => {
- const isActive = activeSection === section.id;
- return (
- handleSectionChange(section.id)}
- active={isActive}
- >
- {section.label}
-
- );
- })}
-
-
+
+
s.group === "identity").map((s) => ({
+ id: s.id,
+ label: s.label,
+ badge: !getIdentityField(identityQuery.data ?? {soul: null, identity: null, user: null}, s.id)?.trim()
+ ? empty
+ : undefined,
+ })),
+ },
+ {
+ label: "Configuration",
+ sections: SECTIONS.filter((s) => s.group === "config").map((s) => ({
+ id: s.id,
+ label: s.label,
+ })),
+ },
+ ]}
+ activeSection={activeSection}
+ onSectionChange={(id) => handleSectionChange(id as SectionId)}
+ />
{/* Editor */}
diff --git a/interface/src/routes/Settings.tsx b/interface/src/routes/Settings.tsx
index f7f13fb56..1415aced4 100644
--- a/interface/src/routes/Settings.tsx
+++ b/interface/src/routes/Settings.tsx
@@ -1,9 +1,10 @@
import { useState, useEffect, useRef } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api, type GlobalSettingsResponse } from "@/api/client";
-import { Button, Input, SettingSidebarButton, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Toggle } from "@/ui";
+import { Button, Input, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Toggle } from "@/ui";
import { useSearch, useNavigate } from "@tanstack/react-router";
import { ChannelSettingCard, DisabledChannelCard } from "@/components/ChannelSettingCard";
+import { SettingSectionNav } from "@/components/SettingSectionNav";
import { ModelSelect } from "@/components/ModelSelect";
import { ProviderIcon } from "@/lib/providerIcons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -362,26 +363,12 @@ export function Settings() {
};
return (
-
- {/* Sidebar */}
-
-
-
- Settings
-
-
-
- {SECTIONS.map((section) => (
- handleSectionChange(section.id)}
- active={activeSection === section.id}
- >
- {section.label}
-
- ))}
-
-
+
+
({id: s.id, label: s.label}))}]}
+ activeSection={activeSection}
+ onSectionChange={(id) => handleSectionChange(id as SectionId)}
+ />
{/* Content */}
diff --git a/interface/src/test/setup.ts b/interface/src/test/setup.ts
new file mode 100644
index 000000000..d0de870dc
--- /dev/null
+++ b/interface/src/test/setup.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
diff --git a/interface/src/ui/style/style.scss b/interface/src/ui/style/style.scss
index 75db8334f..37999791f 100644
--- a/interface/src/ui/style/style.scss
+++ b/interface/src/ui/style/style.scss
@@ -20,6 +20,13 @@ html {
background: hsla(var(--color-app), 1);
}
+@media (max-width: 768px) {
+ input,
+ textarea {
+ font-size: 16px !important;
+ }
+}
+
body {
@apply font-plex text-ink bg-app;
}
diff --git a/interface/vitest.config.ts b/interface/vitest.config.ts
new file mode 100644
index 000000000..7161a4e54
--- /dev/null
+++ b/interface/vitest.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "node:path";
+
+export default defineConfig({
+ plugins: [react()],
+ test: {
+ environment: "jsdom",
+ globals: true,
+ setupFiles: ["./src/test/setup.ts"],
+ },
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "src"),
+ },
+ },
+});