diff --git a/site/src/pages/AgentsPage/AgentChatPageView.tsx b/site/src/pages/AgentsPage/AgentChatPageView.tsx index 627f9d8718..cd11b23334 100644 --- a/site/src/pages/AgentsPage/AgentChatPageView.tsx +++ b/site/src/pages/AgentsPage/AgentChatPageView.tsx @@ -41,6 +41,7 @@ import { SidebarTabView } from "./components/ChatsSidebar/tabs/SidebarTabView"; import { ChatTopBar } from "./components/ChatTopBar"; import { GitPanel } from "./components/GitPanel/GitPanel"; import { DebugPanel } from "./components/RightPanel/DebugPanel/DebugPanel"; +import { DesktopPanel } from "./components/RightPanel/DesktopPanel"; import { RightPanel } from "./components/RightPanel/RightPanel"; import { getWorkspaceStatus, StatusIcon } from "./components/StatusIcon"; import { TerminalPanel } from "./components/TerminalPanel"; @@ -413,10 +414,9 @@ export const AgentChatPageView: FC = ({ }; })(); - // Desktop is only available when the workspace + agent are ready; - // `SidebarTabView` gates the desktop tab/panel on the same condition, - // so resolve tab selection against the same availability to avoid - // picking "desktop" when no desktop panel is rendered. + // Desktop is only available when the workspace and agent are ready; + // include it in the tab list on that same condition to avoid selecting + // "desktop" when no desktop panel is rendered. const availableDesktopChatId = workspace && workspaceAgent ? desktopChatId : undefined; @@ -425,10 +425,11 @@ export const AgentChatPageView: FC = ({ // Single source of truth for available tabs and their order. The list // of tab IDs used by `getEffectiveTabId` is derived from this so a // new tab can never be added to one without the other going out of - // sync. + // sync. Desktop is ordered before terminals so terminals are rightmost. const builtInSidebarTabConfigs = [ { id: "git", label: "Git" }, ...(debugLoggingEnabled ? [{ id: "debug", label: "Debug" }] : []), + ...(availableDesktopChatId ? [{ id: "desktop", label: "Desktop" }] : []), ...(workspace && workspaceAgent && !defaultTerminalHidden ? [{ id: "terminal", label: "Terminal" }] : []), @@ -512,6 +513,13 @@ export const AgentChatPageView: FC = ({ chatInputRef={editing.chatInputRef} /> ); + case "desktop": + return availableDesktopChatId ? ( + + ) : null; case "terminal": return workspace && workspaceAgent ? ( = ({ setPendingTabId((currentTabId) => currentTabId === tabId ? null : currentTabId, ); - const visibleTabIds = [ - ...sidebarTabIds, - ...(availableDesktopChatId ? ["desktop"] : []), - ]; - const remainingTabIds = visibleTabIds.filter((id) => id !== tabId); - const closedTabIndex = visibleTabIds.indexOf(tabId); + const remainingTabIds = sidebarTabIds.filter((id) => id !== tabId); + const closedTabIndex = sidebarTabIds.indexOf(tabId); if (tabId === "terminal") { setDefaultTerminalHiddenState(true); @@ -816,7 +820,6 @@ export const AgentChatPageView: FC = ({ isSidebarCollapsed={isSidebarCollapsed} onToggleSidebarCollapsed={onToggleSidebarCollapsed} chatTitle={chatTitle} - desktopChatId={availableDesktopChatId} /> diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.stories.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.stories.tsx index c0ad3eb77d..413c01e477 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.stories.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.stories.tsx @@ -81,7 +81,6 @@ export const EmptyState: Story = { export const DesktopHidden: Story = { args: { tabs: [], - desktopChatId: undefined, }, }; diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx index 346d8e4f77..c600947d9c 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tabs/SidebarTabView.tsx @@ -18,7 +18,6 @@ import { } from "react"; import { Button } from "#/components/Button/Button"; import { cn } from "#/utils/cn"; -import { DesktopPanel } from "../../RightPanel/DesktopPanel"; /** A single tab definition for the sidebar panel. */ export interface SidebarTab { @@ -48,8 +47,6 @@ interface SidebarTabViewProps { chatTitle?: string; /** Callback to close the panel (used on mobile). */ onClose?: () => void; - /** Desktop chat ID. Omitted if desktop is not available. */ - desktopChatId?: string; /** * The resolved tab ID to render as active (computed by the parent * with `getEffectiveTabId`). Keeping a single source of truth in the @@ -159,7 +156,6 @@ export const SidebarTabView: FC = ({ onToggleSidebarCollapsed, chatTitle, onClose, - desktopChatId, effectiveTabId, onActiveTabChange, addTabControl, @@ -177,19 +173,8 @@ export const SidebarTabView: FC = ({ id: t.id, content: t.content, })); - if (desktopChatId) { - allPanels.push({ - id: "desktop", - content: ( - - ), - }); - } - if (tabs.length === 0 && !desktopChatId) { + if (tabs.length === 0) { return (
= ({
); })} - {desktopChatId && ( - - )} {addTabControl}
{canScrollRight && (