feat: refactor conversations page into a workbench layout and implement workspace switching

- Migrate ConversationsPage to use ConversationWorkbench component. - Create WorkbenchLayout to handle authentication and layout for workbench. - Add WorkbenchPage to render ConversationWorkbench. - Implement WorkspaceSwitcher for switching between dashboard and workbench. - Update AuthProvider to manage authentication for both dashboard and workbench routes. - Enhance WorkbenchHeader with user menu and workspace switcher. - Add tests for workspace switcher and auth provider functionality. - Update translations for workspace labels in English and Chinese. - Exclude e2e tests from TypeScript compilation.
2026-06-13 11:49:03 +08:00
parent a8755811b5
commit d22805c4af
15 changed files with 1033 additions and 559 deletions
@@ -0,0 +1,538 @@
+"use client";
+
+import {
+  ArrowRightLeftIcon,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  CircleUserRoundIcon,
+  CircleXIcon,
+  FilePlus2Icon,
+  Menu,
+  MoreHorizontalIcon,
+  X,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import type { PanelImperativeHandle } from "react-resizable-panels";
+
+import { ConversationCloseDialog } from "@/components/conversation-actions/close-dialog";
+import { ConversationTransferDialog } from "@/components/conversation-actions/transfer-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { useAgentConversationRealtime } from "@/hooks/use-agent-conversation-realtime";
+import { useI18n } from "@/i18n/provider";
+import {
+  agentConversationFilterOptions,
+  agentConversationSelectors,
+  type AgentConversationFilterKey,
+  useAgentConversationsStore,
+} from "@/lib/stores/agent-conversations";
+import { CreateTicketFromConversationDialog } from "../../tickets/_components/create-ticket-from-conversation-dialog";
+import { ChatPanel } from "./chat-panel";
+import { ConversationInfoPanel } from "./conversation-info-panel";
+import { ConversationList } from "./conversation-list";
+
+const workbenchIconButtonClassName =
+  "size-8 text-muted-foreground hover:bg-muted hover:text-foreground";
+
+function getCustomerOnlineClassName(online?: boolean) {
+  return online
+    ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-300"
+    : "border-border bg-muted text-muted-foreground";
+}
+
+function getCustomerOnlineDotClassName(online?: boolean) {
+  return online ? "bg-emerald-500" : "bg-muted-foreground/70";
+}
+
+export function ConversationWorkbench() {
+  const t = useI18n();
+  const conversation = useAgentConversationsStore(
+    agentConversationSelectors.selectedConversation,
+  );
+  const conversationFilter = useAgentConversationsStore(
+    (state) => state.conversationFilter,
+  );
+  const setConversationFilter = useAgentConversationsStore(
+    (state) => state.setConversationFilter,
+  );
+  const loadConversations = useAgentConversationsStore(
+    (state) => state.loadConversations,
+  );
+  const loadMessages = useAgentConversationsStore(
+    (state) => state.loadMessages,
+  );
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [infoPanelCollapsed, setInfoPanelCollapsed] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [mobileCustomerSheetOpen, setMobileCustomerSheetOpen] = useState(false);
+  const [transferOpen, setTransferOpen] = useState(false);
+  const [closeOpen, setCloseOpen] = useState(false);
+  const [createTicketOpen, setCreateTicketOpen] = useState(false);
+  const sidebarPanelRef = useRef<PanelImperativeHandle | null>(null);
+  const infoPanelRef = useRef<PanelImperativeHandle | null>(null);
+  const filterContainerRef = useRef<HTMLDivElement | null>(null);
+  const filterMeasureRef = useRef<HTMLDivElement | null>(null);
+  const [showFilterDropdown, setShowFilterDropdown] = useState(false);
+
+  useEffect(() => {
+    const container = filterContainerRef.current;
+    const measure = filterMeasureRef.current;
+    if (!container || !measure) {
+      return;
+    }
+
+    const updateFilterMode = () => {
+      setShowFilterDropdown(measure.scrollWidth > container.clientWidth);
+    };
+
+    updateFilterMode();
+
+    const observer = new ResizeObserver(() => {
+      updateFilterMode();
+    });
+
+    observer.observe(container);
+    observer.observe(measure);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const currentFilterOption =
+    agentConversationFilterOptions.find((opt) => opt.value === conversationFilter) ??
+    agentConversationFilterOptions[0];
+  const getFilterLabel = (labelKey: string) => t(labelKey);
+
+  useEffect(() => {
+    void loadConversations().catch((error) => {
+      toast.error(error instanceof Error ? error.message : t("conversation.loadListFailed"));
+    });
+  }, [loadConversations, conversationFilter, t]);
+
+  async function handleConversationChanged(conversationId: number) {
+    await loadConversations();
+    await loadMessages(conversationId, {
+      forceLoading: false,
+      reset: false,
+    });
+  }
+
+  useAgentConversationRealtime();
+
+  const handleSidebarToggle = () => {
+    const panel = sidebarPanelRef.current;
+    if (!panel) {
+      setSidebarCollapsed((current) => !current);
+      return;
+    }
+
+    if (panel.isCollapsed()) {
+      panel.expand();
+      setSidebarCollapsed(false);
+      return;
+    }
+
+    panel.collapse();
+    setSidebarCollapsed(true);
+  };
+
+  const handleInfoPanelToggle = () => {
+    const panel = infoPanelRef.current;
+    if (!panel) {
+      setInfoPanelCollapsed((current) => !current);
+      return;
+    }
+
+    if (panel.isCollapsed()) {
+      panel.expand();
+      setInfoPanelCollapsed(false);
+      return;
+    }
+
+    panel.collapse();
+    setInfoPanelCollapsed(true);
+  };
+
+  const renderConversationSidebar = (opts?: { onListAfterSelect?: () => void }) => (
+    <div className="flex h-full min-h-0 flex-1 flex-col bg-inherit">
+      <div className="flex h-12.5 shrink-0 items-start justify-between gap-2 border-b border-border/80 bg-card px-2 py-2">
+        <div ref={filterContainerRef} className="relative min-w-0 flex-1">
+          {showFilterDropdown ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    className="h-8.5 w-full min-w-0 justify-between gap-2 px-3 text-xs sm:text-sm"
+                  />
+                }
+              >
+                <span className="truncate">
+                  {currentFilterOption
+                    ? getFilterLabel(currentFilterOption.labelKey)
+                    : t("conversation.filterPlaceholder")}
+                </span>
+                <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-44 min-w-44">
+                <DropdownMenuRadioGroup
+                  value={conversationFilter}
+                  onValueChange={(value) =>
+                    setConversationFilter(value as AgentConversationFilterKey)
+                  }
+                >
+                  {agentConversationFilterOptions.map((opt) => (
+                    <DropdownMenuRadioItem key={opt.value} value={opt.value}>
+                      {getFilterLabel(opt.labelKey)}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <Tabs
+              value={conversationFilter}
+              onValueChange={(value) =>
+                setConversationFilter(value as AgentConversationFilterKey)
+              }
+              className="min-w-0 flex-1 gap-0"
+            >
+              <TabsList
+                className="w-full min-w-0 justify-start"
+              >
+                {agentConversationFilterOptions.map((opt) => (
+                  <TabsTrigger
+                    key={opt.value}
+                    value={opt.value}
+                    className="shrink-0 px-2.5 text-xs sm:text-sm"
+                  >
+                    {getFilterLabel(opt.labelKey)}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          )}
+          <div
+            ref={filterMeasureRef}
+            className="pointer-events-none absolute whitespace-nowrap opacity-0"
+            aria-hidden="true"
+          >
+            <div className="inline-flex">
+              {agentConversationFilterOptions.map((opt) => (
+                <span
+                  key={opt.value}
+                  className="shrink-0 px-2.5 text-xs sm:text-sm"
+                >
+                  {getFilterLabel(opt.labelKey)}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={`${workbenchIconButtonClassName} mt-0.5 shrink-0 lg:hidden`}
+          onClick={() => setMobileMenuOpen(false)}
+        >
+          <X className="size-4" />
+        </Button>
+      </div>
+      <ConversationList onAfterSelect={opts?.onListAfterSelect} />
+    </div>
+  );
+
+  const workspaceContent = (
+    <div className="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden bg-card text-card-foreground">
+      <div className="flex h-12.5 shrink-0 items-center justify-between gap-3 border-b border-border/80 bg-card px-3 py-1">
+        <div className="flex min-w-0 items-center gap-2 sm:gap-3">
+          <Button
+            variant="ghost"
+            size="icon"
+            className={`${workbenchIconButtonClassName} lg:hidden`}
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <Menu className="size-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={`${workbenchIconButtonClassName} hidden lg:flex`}
+            onClick={handleSidebarToggle}
+          >
+            {sidebarCollapsed ? (
+              <ChevronRight className="size-4" />
+            ) : (
+              <ChevronLeft className="size-4" />
+            )}
+          </Button>
+          {conversation ? (
+            <>
+              <Avatar className="size-8 shrink-0 lg:size-9">
+                <AvatarImage src="" />
+                <AvatarFallback className="bg-primary/10 text-sm text-primary">
+                  {t("conversation.customerAvatar")}
+                </AvatarFallback>
+              </Avatar>
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <p className="min-w-0 truncate text-sm font-medium leading-tight">
+                    {conversation.customerName ||
+                      t("conversation.customerFallback", {
+                        id: conversation.customerId || conversation.id,
+                      })}
+                  </p>
+                  <span
+                    className={`inline-flex shrink-0 items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] leading-none ${getCustomerOnlineClassName(
+                      conversation.customerOnline,
+                    )}`}
+                  >
+                    <span
+                      className={`size-1.5 rounded-full ${getCustomerOnlineDotClassName(
+                        conversation.customerOnline,
+                      )}`}
+                    />
+                    {conversation.customerOnline
+                      ? t("conversation.customerOnline")
+                      : t("conversation.customerOffline")}
+                  </span>
+                </div>
+                <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                  <span>{t("conversation.channelNumber", { id: conversation.channelId || "-" })}</span>
+                  {conversation.customerId ? (
+                    <>
+                      <span className="text-muted-foreground/60"> / </span>
+                      <span>{t("conversation.linkedCustomer")}</span>
+                    </>
+                  ) : null}
+                </p>
+              </div>
+            </>
+          ) : (
+            <div className="min-w-0">
+              <p className="truncate font-medium text-[14px] leading-tight">
+                {t("conversation.workbenchTitle")}
+              </p>
+              <p className="mt-0.5 truncate text-[14px] text-muted-foreground sm:text-[14px] lg:hidden">
+                {t("conversation.openMenuSelectConversation")}
+              </p>
+              <p className="mt-0.5 hidden truncate text-[12px] text-muted-foreground lg:block">
+                {t("conversation.selectConversationFromSidebar")}
+              </p>
+            </div>
+          )}
+        </div>
+        <div className="flex shrink-0 items-center gap-0.5 sm:gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className={`${workbenchIconButtonClassName} lg:hidden`}
+            disabled={!conversation}
+            aria-label={t("conversation.conversationInfo")}
+            onClick={() => setMobileCustomerSheetOpen(true)}
+          >
+            <CircleUserRoundIcon className="size-4" />
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={workbenchIconButtonClassName}
+                  disabled={!conversation}
+                />
+              }
+            >
+              <MoreHorizontalIcon className="size-4" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-44 min-w-44">
+              <DropdownMenuItem
+                onClick={() => setCreateTicketOpen(true)}
+                disabled={!conversation}
+              >
+                <FilePlus2Icon />
+                {t("conversation.createTicket")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setTransferOpen(true)}
+                disabled={!conversation || conversation.status !== 3}
+              >
+                <ArrowRightLeftIcon />
+                {t("conversation.transferConversation")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setCloseOpen(true)}
+                disabled={!conversation || conversation.status === 4}
+              >
+                <CircleXIcon />
+                {t("conversation.closeConversation")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={`${workbenchIconButtonClassName} hidden lg:flex`}
+            onClick={handleInfoPanelToggle}
+            aria-label={
+              infoPanelCollapsed
+                ? t("conversation.expandConversationInfo")
+                : t("conversation.collapseConversationInfo")
+            }
+          >
+            {infoPanelCollapsed ? (
+              <ChevronLeft className="size-4" />
+            ) : (
+              <ChevronRight className="size-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+      <div className="flex min-h-0 w-full flex-1 overflow-hidden">
+        <ChatPanel />
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex h-[calc(100dvh-var(--header-height))] min-h-0 w-full min-w-0 flex-col overflow-hidden lg:h-full">
+      {mobileMenuOpen && (
+        <button
+          type="button"
+          aria-label={t("conversation.closeConversationList")}
+          className="fixed top-12 right-0 bottom-0 left-0 z-30 bg-black/50 lg:hidden"
+          onClick={() => setMobileMenuOpen(false)}
+        />
+      )}
+      <div
+        className={`fixed top-12 bottom-0 left-0 z-40 flex w-[min(22rem,calc(100vw-0.75rem))] max-w-[min(22rem,calc(100vw-0.75rem))] flex-col overflow-hidden border-r border-border/80 bg-card text-card-foreground shadow-xl transition-transform duration-300 ease-out will-change-transform touch-manipulation overscroll-contain supports-[padding:max(0px)]:pb-[env(safe-area-inset-bottom)] lg:hidden ${
+          mobileMenuOpen ? "translate-x-0" : "-translate-x-full pointer-events-none"
+        }`}
+        aria-hidden={!mobileMenuOpen}
+      >
+        {renderConversationSidebar({
+          onListAfterSelect: () => setMobileMenuOpen(false),
+        })}
+      </div>
+
+      <div className="flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden lg:hidden">
+        {workspaceContent}
+      </div>
+      <div className="hidden min-h-0 w-full flex-1 overflow-hidden lg:flex">
+        <ResizablePanelGroup orientation="horizontal">
+          <ResizablePanel
+            panelRef={sidebarPanelRef}
+            defaultSize="20%"
+            minSize="10%"
+            maxSize="40%"
+            collapsedSize="0%"
+            collapsible
+            onResize={(panelSize: { asPercentage: number }) => {
+              setSidebarCollapsed(panelSize.asPercentage <= 1);
+            }}
+            className="min-h-0 border-r border-border/80 bg-card"
+          >
+            <div className="flex h-full min-h-0 flex-col overflow-hidden bg-card text-card-foreground">
+              {renderConversationSidebar()}
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="50%" minSize="32%" className="min-h-0 bg-card">
+            <div className="flex h-full min-h-0 flex-col overflow-hidden">
+              {workspaceContent}
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel
+            panelRef={infoPanelRef}
+            defaultSize="500px"
+            minSize="20%"
+            maxSize="40%"
+            collapsedSize="0%"
+            collapsible
+            onResize={(panelSize: { asPercentage: number }) => {
+              setInfoPanelCollapsed(panelSize.asPercentage <= 1);
+            }}
+            className="min-h-0 border-l border-border/80 bg-card"
+          >
+            <ConversationInfoPanel conversation={conversation} className="h-full" />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+      <ConversationTransferDialog
+        open={transferOpen}
+        mode="transfer"
+        conversationId={conversation?.id ?? null}
+        onOpenChange={setTransferOpen}
+        onSuccess={async () => {
+          setTransferOpen(false);
+          if (conversation?.id) {
+            await handleConversationChanged(conversation.id);
+          }
+        }}
+      />
+      <ConversationCloseDialog
+        open={closeOpen}
+        conversationId={conversation?.id ?? null}
+        onOpenChange={setCloseOpen}
+        onSuccess={async () => {
+          setCloseOpen(false);
+          if (conversation?.id) {
+            await handleConversationChanged(conversation.id);
+          }
+        }}
+      />
+      <CreateTicketFromConversationDialog
+        open={createTicketOpen}
+        onOpenChange={setCreateTicketOpen}
+        conversation={
+          conversation
+            ? {
+                id: conversation.id,
+                customerName: conversation.customerName,
+                customerId: conversation.customerId ?? 0,
+                lastMessageSummary: conversation.lastMessageSummary,
+                currentAssigneeId: conversation.currentAssigneeId,
+              }
+            : null
+        }
+        onSuccess={() => {
+          setCreateTicketOpen(false);
+        }}
+      />
+
+      <Sheet open={mobileCustomerSheetOpen} onOpenChange={setMobileCustomerSheetOpen}>
+        <SheetContent
+          side="right"
+          className="flex w-full flex-col gap-0 border-l p-0 sm:max-w-md"
+          showCloseButton
+        >
+          <ConversationInfoPanel
+            conversation={conversation}
+            variant="embedded"
+            className="min-h-0 flex-1"
+          />
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}
@@ -1,538 +1,5 @@
-"use client";
-
-import {
-  ArrowRightLeftIcon,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsUpDown,
-  CircleUserRoundIcon,
-  CircleXIcon,
-  FilePlus2Icon,
-  Menu,
-  MoreHorizontalIcon,
-  X,
-} from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
-import type { PanelImperativeHandle } from "react-resizable-panels";
-
-import { ConversationCloseDialog } from "@/components/conversation-actions/close-dialog";
-import { ConversationTransferDialog } from "@/components/conversation-actions/transfer-dialog";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
-import { useAgentConversationRealtime } from "@/hooks/use-agent-conversation-realtime";
-import { useI18n } from "@/i18n/provider";
-import {
-  agentConversationFilterOptions,
-  agentConversationSelectors,
-  type AgentConversationFilterKey,
-  useAgentConversationsStore,
-} from "@/lib/stores/agent-conversations";
-import { CreateTicketFromConversationDialog } from "../tickets/_components/create-ticket-from-conversation-dialog";
-import { ChatPanel } from "./_components/chat-panel";
-import { ConversationInfoPanel } from "./_components/conversation-info-panel";
-import { ConversationList } from "./_components/conversation-list";
-
-const workbenchIconButtonClassName =
-  "size-8 text-muted-foreground hover:bg-muted hover:text-foreground";
-
-function getCustomerOnlineClassName(online?: boolean) {
-  return online
-    ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/15 dark:text-emerald-300"
-    : "border-border bg-muted text-muted-foreground";
-}
-
-function getCustomerOnlineDotClassName(online?: boolean) {
-  return online ? "bg-emerald-500" : "bg-muted-foreground/70";
-}
+import { ConversationWorkbench } from "./_components/conversation-workbench";

 export default function ConversationsPage() {
-  const t = useI18n();
-  const conversation = useAgentConversationsStore(
-    agentConversationSelectors.selectedConversation,
-  );
-  const conversationFilter = useAgentConversationsStore(
-    (state) => state.conversationFilter,
-  );
-  const setConversationFilter = useAgentConversationsStore(
-    (state) => state.setConversationFilter,
-  );
-  const loadConversations = useAgentConversationsStore(
-    (state) => state.loadConversations,
-  );
-  const loadMessages = useAgentConversationsStore(
-    (state) => state.loadMessages,
-  );
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [infoPanelCollapsed, setInfoPanelCollapsed] = useState(false);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [mobileCustomerSheetOpen, setMobileCustomerSheetOpen] = useState(false);
-  const [transferOpen, setTransferOpen] = useState(false);
-  const [closeOpen, setCloseOpen] = useState(false);
-  const [createTicketOpen, setCreateTicketOpen] = useState(false);
-  const sidebarPanelRef = useRef<PanelImperativeHandle | null>(null);
-  const infoPanelRef = useRef<PanelImperativeHandle | null>(null);
-  const filterContainerRef = useRef<HTMLDivElement | null>(null);
-  const filterMeasureRef = useRef<HTMLDivElement | null>(null);
-  const [showFilterDropdown, setShowFilterDropdown] = useState(false);
-
-  useEffect(() => {
-    const container = filterContainerRef.current;
-    const measure = filterMeasureRef.current;
-    if (!container || !measure) {
-      return;
-    }
-
-    const updateFilterMode = () => {
-      setShowFilterDropdown(measure.scrollWidth > container.clientWidth);
-    };
-
-    updateFilterMode();
-
-    const observer = new ResizeObserver(() => {
-      updateFilterMode();
-    });
-
-    observer.observe(container);
-    observer.observe(measure);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  const currentFilterOption =
-    agentConversationFilterOptions.find((opt) => opt.value === conversationFilter) ??
-    agentConversationFilterOptions[0];
-  const getFilterLabel = (labelKey: string) => t(labelKey);
-
-  useEffect(() => {
-    void loadConversations().catch((error) => {
-      toast.error(error instanceof Error ? error.message : t("conversation.loadListFailed"));
-    });
-  }, [loadConversations, conversationFilter, t]);
-
-  async function handleConversationChanged(conversationId: number) {
-    await loadConversations();
-    await loadMessages(conversationId, {
-      forceLoading: false,
-      reset: false,
-    });
-  }
-
-  useAgentConversationRealtime();
-
-  const handleSidebarToggle = () => {
-    const panel = sidebarPanelRef.current;
-    if (!panel) {
-      setSidebarCollapsed((current) => !current);
-      return;
-    }
-
-    if (panel.isCollapsed()) {
-      panel.expand();
-      setSidebarCollapsed(false);
-      return;
-    }
-
-    panel.collapse();
-    setSidebarCollapsed(true);
-  };
-
-  const handleInfoPanelToggle = () => {
-    const panel = infoPanelRef.current;
-    if (!panel) {
-      setInfoPanelCollapsed((current) => !current);
-      return;
-    }
-
-    if (panel.isCollapsed()) {
-      panel.expand();
-      setInfoPanelCollapsed(false);
-      return;
-    }
-
-    panel.collapse();
-    setInfoPanelCollapsed(true);
-  };
-
-  const renderConversationSidebar = (opts?: { onListAfterSelect?: () => void }) => (
-    <div className="flex h-full min-h-0 flex-1 flex-col bg-inherit">
-      <div className="flex h-12.5 shrink-0 items-start justify-between gap-2 border-b border-border/80 bg-card px-2 py-2">
-        <div ref={filterContainerRef} className="relative min-w-0 flex-1">
-          {showFilterDropdown ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={
-                  <Button
-                    variant="outline"
-                    className="h-8.5 w-full min-w-0 justify-between gap-2 px-3 text-xs sm:text-sm"
-                  />
-                }
-              >
-                <span className="truncate">
-                  {currentFilterOption
-                    ? getFilterLabel(currentFilterOption.labelKey)
-                    : t("conversation.filterPlaceholder")}
-                </span>
-                <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="w-44 min-w-44">
-                <DropdownMenuRadioGroup
-                  value={conversationFilter}
-                  onValueChange={(value) =>
-                    setConversationFilter(value as AgentConversationFilterKey)
-                  }
-                >
-                  {agentConversationFilterOptions.map((opt) => (
-                    <DropdownMenuRadioItem key={opt.value} value={opt.value}>
-                      {getFilterLabel(opt.labelKey)}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          ) : (
-            <Tabs
-              value={conversationFilter}
-              onValueChange={(value) =>
-                setConversationFilter(value as AgentConversationFilterKey)
-              }
-              className="min-w-0 flex-1 gap-0"
-            >
-              <TabsList
-                className="w-full min-w-0 justify-start"
-              >
-                {agentConversationFilterOptions.map((opt) => (
-                  <TabsTrigger
-                    key={opt.value}
-                    value={opt.value}
-                    className="shrink-0 px-2.5 text-xs sm:text-sm"
-                  >
-                    {getFilterLabel(opt.labelKey)}
-                  </TabsTrigger>
-                ))}
-              </TabsList>
-            </Tabs>
-          )}
-          <div
-            ref={filterMeasureRef}
-            className="pointer-events-none absolute whitespace-nowrap opacity-0"
-            aria-hidden="true"
-          >
-            <div className="inline-flex">
-              {agentConversationFilterOptions.map((opt) => (
-                <span
-                  key={opt.value}
-                  className="shrink-0 px-2.5 text-xs sm:text-sm"
-                >
-                  {getFilterLabel(opt.labelKey)}
-                </span>
-              ))}
-            </div>
-          </div>
-        </div>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={`${workbenchIconButtonClassName} mt-0.5 shrink-0 lg:hidden`}
-          onClick={() => setMobileMenuOpen(false)}
-        >
-          <X className="size-4" />
-        </Button>
-      </div>
-      <ConversationList onAfterSelect={opts?.onListAfterSelect} />
-    </div>
-  );
-
-  const workspaceContent = (
-    <div className="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden bg-card text-card-foreground">
-      <div className="flex h-12.5 shrink-0 items-center justify-between gap-3 border-b border-border/80 bg-card px-3 py-1">
-        <div className="flex min-w-0 items-center gap-2 sm:gap-3">
-          <Button
-            variant="ghost"
-            size="icon"
-            className={`${workbenchIconButtonClassName} lg:hidden`}
-            onClick={() => setMobileMenuOpen(true)}
-          >
-            <Menu className="size-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className={`${workbenchIconButtonClassName} hidden lg:flex`}
-            onClick={handleSidebarToggle}
-          >
-            {sidebarCollapsed ? (
-              <ChevronRight className="size-4" />
-            ) : (
-              <ChevronLeft className="size-4" />
-            )}
-          </Button>
-          {conversation ? (
-            <>
-              <Avatar className="size-8 shrink-0 lg:size-9">
-                <AvatarImage src="" />
-                <AvatarFallback className="bg-primary/10 text-sm text-primary">
-                  {t("conversation.customerAvatar")}
-                </AvatarFallback>
-              </Avatar>
-              <div className="min-w-0">
-                <div className="flex items-center gap-2">
-                  <p className="min-w-0 truncate text-sm font-medium leading-tight">
-                    {conversation.customerName ||
-                      t("conversation.customerFallback", {
-                        id: conversation.customerId || conversation.id,
-                      })}
-                  </p>
-                  <span
-                    className={`inline-flex shrink-0 items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] leading-none ${getCustomerOnlineClassName(
-                      conversation.customerOnline,
-                    )}`}
-                  >
-                    <span
-                      className={`size-1.5 rounded-full ${getCustomerOnlineDotClassName(
-                        conversation.customerOnline,
-                      )}`}
-                    />
-                    {conversation.customerOnline
-                      ? t("conversation.customerOnline")
-                      : t("conversation.customerOffline")}
-                  </span>
-                </div>
-                <p className="mt-0.5 truncate text-xs text-muted-foreground">
-                  <span>{t("conversation.channelNumber", { id: conversation.channelId || "-" })}</span>
-                  {conversation.customerId ? (
-                    <>
-                      <span className="text-muted-foreground/60"> / </span>
-                      <span>{t("conversation.linkedCustomer")}</span>
-                    </>
-                  ) : null}
-                </p>
-              </div>
-            </>
-          ) : (
-            <div className="min-w-0">
-              <p className="truncate font-medium text-[14px] leading-tight">
-                {t("conversation.workbenchTitle")}
-              </p>
-              <p className="mt-0.5 truncate text-[14px] text-muted-foreground sm:text-[14px] lg:hidden">
-                {t("conversation.openMenuSelectConversation")}
-              </p>
-              <p className="mt-0.5 hidden truncate text-[12px] text-muted-foreground lg:block">
-                {t("conversation.selectConversationFromSidebar")}
-              </p>
-            </div>
-          )}
-        </div>
-        <div className="flex shrink-0 items-center gap-0.5 sm:gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className={`${workbenchIconButtonClassName} lg:hidden`}
-            disabled={!conversation}
-            aria-label={t("conversation.conversationInfo")}
-            onClick={() => setMobileCustomerSheetOpen(true)}
-          >
-            <CircleUserRoundIcon className="size-4" />
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              render={
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className={workbenchIconButtonClassName}
-                  disabled={!conversation}
-                />
-              }
-            >
-              <MoreHorizontalIcon className="size-4" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-44 min-w-44">
-              <DropdownMenuItem
-                onClick={() => setCreateTicketOpen(true)}
-                disabled={!conversation}
-              >
-                <FilePlus2Icon />
-                {t("conversation.createTicket")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => setTransferOpen(true)}
-                disabled={!conversation || conversation.status !== 3}
-              >
-                <ArrowRightLeftIcon />
-                {t("conversation.transferConversation")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => setCloseOpen(true)}
-                disabled={!conversation || conversation.status === 4}
-              >
-                <CircleXIcon />
-                {t("conversation.closeConversation")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Button
-            variant="ghost"
-            size="icon"
-            className={`${workbenchIconButtonClassName} hidden lg:flex`}
-            onClick={handleInfoPanelToggle}
-            aria-label={
-              infoPanelCollapsed
-                ? t("conversation.expandConversationInfo")
-                : t("conversation.collapseConversationInfo")
-            }
-          >
-            {infoPanelCollapsed ? (
-              <ChevronLeft className="size-4" />
-            ) : (
-              <ChevronRight className="size-4" />
-            )}
-          </Button>
-        </div>
-      </div>
-      <div className="flex min-h-0 w-full flex-1 overflow-hidden">
-        <ChatPanel />
-      </div>
-    </div>
-  );
-
-  return (
-    <div className="flex h-[calc(100dvh-var(--header-height))] min-h-0 w-full min-w-0 flex-col overflow-hidden lg:h-full">
-      {mobileMenuOpen && (
-        <button
-          type="button"
-          aria-label={t("conversation.closeConversationList")}
-          className="fixed top-12 right-0 bottom-0 left-0 z-30 bg-black/50 lg:hidden"
-          onClick={() => setMobileMenuOpen(false)}
-        />
-      )}
-      <div
-        className={`fixed top-12 bottom-0 left-0 z-40 flex w-[min(22rem,calc(100vw-0.75rem))] max-w-[min(22rem,calc(100vw-0.75rem))] flex-col overflow-hidden border-r border-border/80 bg-card text-card-foreground shadow-xl transition-transform duration-300 ease-out will-change-transform touch-manipulation overscroll-contain supports-[padding:max(0px)]:pb-[env(safe-area-inset-bottom)] lg:hidden ${
-          mobileMenuOpen ? "translate-x-0" : "-translate-x-full pointer-events-none"
-        }`}
-        aria-hidden={!mobileMenuOpen}
-      >
-        {renderConversationSidebar({
-          onListAfterSelect: () => setMobileMenuOpen(false),
-        })}
-      </div>
-
-      <div className="flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden lg:hidden">
-        {workspaceContent}
-      </div>
-      <div className="hidden min-h-0 w-full flex-1 overflow-hidden lg:flex">
-        <ResizablePanelGroup orientation="horizontal">
-          <ResizablePanel
-            panelRef={sidebarPanelRef}
-            defaultSize="20%"
-            minSize="10%"
-            maxSize="40%"
-            collapsedSize="0%"
-            collapsible
-            onResize={(panelSize: { asPercentage: number }) => {
-              setSidebarCollapsed(panelSize.asPercentage <= 1);
-            }}
-            className="min-h-0 border-r border-border/80 bg-card"
-          >
-            <div className="flex h-full min-h-0 flex-col overflow-hidden bg-card text-card-foreground">
-              {renderConversationSidebar()}
-            </div>
-          </ResizablePanel>
-          <ResizableHandle withHandle />
-          <ResizablePanel defaultSize="50%" minSize="32%" className="min-h-0 bg-card">
-            <div className="flex h-full min-h-0 flex-col overflow-hidden">
-              {workspaceContent}
-            </div>
-          </ResizablePanel>
-          <ResizableHandle withHandle />
-          <ResizablePanel
-            panelRef={infoPanelRef}
-            defaultSize="500px"
-            minSize="20%"
-            maxSize="40%"
-            collapsedSize="0%"
-            collapsible
-            onResize={(panelSize: { asPercentage: number }) => {
-              setInfoPanelCollapsed(panelSize.asPercentage <= 1);
-            }}
-            className="min-h-0 border-l border-border/80 bg-card"
-          >
-            <ConversationInfoPanel conversation={conversation} className="h-full" />
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
-      <ConversationTransferDialog
-        open={transferOpen}
-        mode="transfer"
-        conversationId={conversation?.id ?? null}
-        onOpenChange={setTransferOpen}
-        onSuccess={async () => {
-          setTransferOpen(false);
-          if (conversation?.id) {
-            await handleConversationChanged(conversation.id);
-          }
-        }}
-      />
-      <ConversationCloseDialog
-        open={closeOpen}
-        conversationId={conversation?.id ?? null}
-        onOpenChange={setCloseOpen}
-        onSuccess={async () => {
-          setCloseOpen(false);
-          if (conversation?.id) {
-            await handleConversationChanged(conversation.id);
-          }
-        }}
-      />
-      <CreateTicketFromConversationDialog
-        open={createTicketOpen}
-        onOpenChange={setCreateTicketOpen}
-        conversation={
-          conversation
-            ? {
-                id: conversation.id,
-                customerName: conversation.customerName,
-                customerId: conversation.customerId ?? 0,
-                lastMessageSummary: conversation.lastMessageSummary,
-                currentAssigneeId: conversation.currentAssigneeId,
-              }
-            : null
-        }
-        onSuccess={() => {
-          setCreateTicketOpen(false);
-        }}
-      />
-
-      <Sheet open={mobileCustomerSheetOpen} onOpenChange={setMobileCustomerSheetOpen}>
-        <SheetContent
-          side="right"
-          className="flex w-full flex-col gap-0 border-l p-0 sm:max-w-md"
-          showCloseButton
-        >
-          <ConversationInfoPanel
-            conversation={conversation}
-            variant="embedded"
-            className="min-h-0 flex-1"
-          />
-        </SheetContent>
-      </Sheet>
-    </div>
-  );
+  return <ConversationWorkbench />;
 }
@@ -0,0 +1,63 @@
+"use client"
+
+import { Loader2Icon } from "lucide-react"
+import { usePathname, useRouter } from "next/navigation"
+import type { CSSProperties, ReactNode } from "react"
+import { useEffect } from "react"
+
+import { useAuth } from "@/components/auth-provider"
+import { NotificationProvider } from "@/components/notification-provider"
+import { WorkbenchHeader } from "@/components/workbench-header"
+import { useI18n } from "@/i18n/provider"
+
+export default function WorkbenchLayout({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const t = useI18n()
+  const { ready, session } = useAuth()
+  const pathname = usePathname()
+  const router = useRouter()
+  const isWorkbenchRoute = pathname?.startsWith("/workbench") ?? false
+
+  useEffect(() => {
+    if (ready && !session && isWorkbenchRoute) {
+      router.replace("/dashboard/login")
+    }
+  }, [isWorkbenchRoute, ready, router, session])
+
+  if (!ready || !session) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-[linear-gradient(160deg,#f3f1e8_0%,#f8faf5_46%,#e8f7f2_100%)] p-6">
+        <div className="flex items-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <Loader2Icon className="size-5 animate-spin" />
+          </div>
+          <div className="space-y-1">
+            <p className="text-base font-medium">{t("auth.checkingSession")}</p>
+            <p className="text-sm text-muted-foreground">
+              {t("auth.syncingProfile")}
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="flex h-svh min-h-0 flex-col overflow-hidden bg-background"
+      style={
+        {
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as CSSProperties
+      }
+    >
+      <NotificationProvider>
+        <WorkbenchHeader />
+        <main className="flex min-h-0 flex-1 overflow-hidden">{children}</main>
+      </NotificationProvider>
+    </div>
+  )
+}
@@ -0,0 +1,5 @@
+import { ConversationWorkbench } from "@/app/dashboard/conversations/_components/conversation-workbench";
+
+export default function WorkbenchPage() {
+  return <ConversationWorkbench />;
+}
@@ -1,7 +1,6 @@
 "use client"

 import type { ComponentProps } from "react"
-import Link from "next/link"
 import { useMemo } from "react"

 import { useI18n } from "@/i18n/provider"
@@ -13,6 +12,7 @@ import { useAuth } from "@/components/auth-provider"
 import { NavMain } from "@/components/nav-main"
 import { NavSecondary } from "@/components/nav-secondary"
 import { NavUser } from "@/components/nav-user"
+import { WorkspaceSwitcher } from "@/components/workspace-switcher"
 import {
  Sidebar,
  SidebarContent,
@@ -45,19 +45,16 @@ export function AppSidebar({ ...props }: ComponentProps<typeof Sidebar>) {
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
-            <SidebarMenuButton
-              className="data-[slot=sidebar-menu-button]:p-1.5!"
-              render={<Link href="/dashboard" />}
-            >
-              <img
-                src="/images/logo.svg"
-                alt={t("app.brand")}
-                width="32"
-                height="32"
-                className="size-7 shrink-0 object-contain"
-              />
-              <span className="text-base font-semibold">{t("app.brand")}</span>
-            </SidebarMenuButton>
+            <WorkspaceSwitcher
+              currentWorkspace="dashboard"
+              variant="sidebar"
+              trigger={
+                <SidebarMenuButton
+                  size="lg"
+                  className="data-[slot=sidebar-menu-button]:p-1.5!"
+                />
+              }
+            />
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
@@ -0,0 +1,15 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+const source = await readFile(new URL("./auth-provider.tsx", import.meta.url), "utf8");
+
+test("refreshProfile preserves the stored token when the profile payload omits it", () => {
+  assert.match(source, /accessToken:\s*profile\.accessToken\s*\|\|\s*stored\.accessToken/);
+  assert.match(source, /expiresAt:\s*profile\.expiresAt\s*\|\|\s*stored\.expiresAt/);
+});
+
+test("refreshProfile only clears session for explicit auth error codes", () => {
+  assert.match(source, /errorCode\s*===\s*3000\s*\|\|\s*errorCode\s*===\s*3002/);
+  assert.doesNotMatch(source, /catch\s*\([^)]*\)\s*\{\s*clearSession\(\)/);
+});
@@ -35,7 +35,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
  const [session, setSession] = useState<AuthSession | null>(null)
  const [ready, setReady] = useState(false)
  const isDashboardLoginRoute = pathname?.startsWith("/dashboard/login") ?? false
-  const requiresAuth = (pathname?.startsWith("/dashboard") ?? false) && !isDashboardLoginRoute
+  const requiresAuth =
+    ((pathname?.startsWith("/dashboard") ?? false) ||
+      (pathname?.startsWith("/workbench") ?? false)) &&
+    !isDashboardLoginRoute

  const refreshProfile = useCallback(async () => {
    const stored = readSession()
@@ -52,16 +55,21 @@ export function AuthProvider({ children }: { children: ReactNode }) {
        user: profile.user,
        permissions: profile.permissions,
        roles: profile.roles,
+        accessToken: profile.accessToken || stored.accessToken,
+        expiresAt: profile.expiresAt || stored.expiresAt,
      }
      writeSession(nextSession)
      setSession(nextSession)
-    } catch {
-      clearSession()
-      setSession(null)
-      if (requiresAuth) {
-        startTransition(() => {
-          router.replace("/dashboard/login")
-        })
+    } catch (error) {
+      const errorCode = (error as Error & { errorCode?: number }).errorCode
+      if (errorCode === 3000 || errorCode === 3002) {
+        clearSession()
+        setSession(null)
+        if (requiresAuth) {
+          startTransition(() => {
+            router.replace("/dashboard/login")
+          })
+        }
      }
    } finally {
      setReady(true)
@@ -0,0 +1,146 @@
+"use client"
+
+import { BellIcon, KeyRoundIcon, LogOutIcon, UserIcon } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+
+import { ChangePasswordDialog } from "@/components/change-password-dialog"
+import { LocaleSwitcher } from "@/components/locale-switcher"
+import { PaletteToggle } from "@/components/palette-toggle"
+import { RealtimeConnectionStatus } from "@/components/realtime-connection-status"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { WorkspaceSwitcher } from "@/components/workspace-switcher"
+import { useAuth } from "@/components/auth-provider"
+import { useNotifications } from "@/components/notification-provider"
+import { useI18n } from "@/i18n/provider"
+import { useAgentConversationsStore } from "@/lib/stores/agent-conversations"
+
+export function WorkbenchHeader() {
+  const realtimeStatus = useAgentConversationsStore((state) => state.realtimeStatus)
+
+  return (
+    <header className="flex h-(--header-height) shrink-0 items-center border-b border-border/70 bg-background/88 backdrop-blur supports-[backdrop-filter]:bg-background/76">
+      <div className="flex w-full min-w-0 items-center justify-between gap-3 px-3 lg:px-4">
+        <div className="min-w-0">
+          <WorkspaceSwitcher currentWorkspace="workbench" />
+        </div>
+        <div className="flex min-w-0 items-center justify-end gap-2">
+          <div className="hidden sm:block">
+            <RealtimeConnectionStatus status={realtimeStatus} compact />
+          </div>
+          <LocaleSwitcher />
+          <PaletteToggle />
+          <ThemeToggle />
+          <WorkbenchUserMenu />
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function WorkbenchUserMenu() {
+  const t = useI18n()
+  const router = useRouter()
+  const { session, signOut } = useAuth()
+  const { unreadCount } = useNotifications()
+  const [changePasswordOpen, setChangePasswordOpen] = useState(false)
+  const user = {
+    name: session?.user.nickname || session?.user.username || t("common.notSignedIn"),
+    email: session?.user.username || t("common.guest"),
+    avatar: session?.user.avatar || "",
+  }
+  const fallback = user.name.slice(0, 1).toUpperCase() || "U"
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="icon"
+              className="relative size-9 rounded-full"
+              aria-label={user.name}
+            />
+          }
+        >
+          <Avatar className="size-8">
+            <AvatarImage src={user.avatar} alt={user.name} />
+            <AvatarFallback>
+              {fallback || <UserIcon className="size-4" />}
+            </AvatarFallback>
+          </Avatar>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="min-w-56" align="end" sideOffset={8}>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="size-8">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback>{fallback}</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              onClick={() => {
+                router.push("/dashboard/notifications")
+              }}
+              className="gap-2"
+            >
+              <BellIcon />
+              <span className="flex-1">{t("nav.notifications")}</span>
+              {unreadCount > 0 ? (
+                <Badge className="h-5 min-w-5 px-1.5">
+                  {unreadCount > 99 ? "99+" : unreadCount}
+                </Badge>
+              ) : null}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                setChangePasswordOpen(true)
+              }}
+            >
+              <KeyRoundIcon />
+              {t("nav.changePassword")}
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={() => {
+              void signOut()
+            }}
+          >
+            <LogOutIcon />
+            {t("nav.signOut")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <ChangePasswordDialog
+        open={changePasswordOpen}
+        onOpenChange={setChangePasswordOpen}
+        onSuccess={signOut}
+      />
+    </>
+  )
+}
@@ -0,0 +1,16 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import { describe, it } from "node:test";
+
+const source = await readFile(new URL("./workspace-switcher.tsx", import.meta.url), "utf8");
+
+describe("workspace switcher config", () => {
+  it("contains dashboard and workbench destinations", async () => {
+  assert.match(source, /key:\s*"dashboard"[\s\S]*href:\s*"\/dashboard"[\s\S]*labelKey:\s*"workspace\.dashboard"/);
+  assert.match(source, /key:\s*"workbench"[\s\S]*href:\s*"\/workbench"[\s\S]*labelKey:\s*"workspace\.workbench"/);
+});
+
+it("wraps the dropdown label in a Base UI menu group", async () => {
+  assert.match(source, /<DropdownMenuGroup>[\s\S]*<DropdownMenuLabel>\{t\("workspace\.switchWorkspace"\)\}<\/DropdownMenuLabel>/);
+});
+});
@@ -0,0 +1,115 @@
+"use client"
+
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"
+import Link from "next/link"
+import type { ReactElement } from "react"
+
+import { useI18n } from "@/i18n/provider"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export type WorkspaceKey = "dashboard" | "workbench"
+
+export type WorkspaceOption = {
+  key: WorkspaceKey
+  href: string
+  labelKey: string
+}
+
+export const workspaceOptions: WorkspaceOption[] = [
+  {
+    key: "dashboard",
+    href: "/dashboard",
+    labelKey: "workspace.dashboard",
+  },
+  {
+    key: "workbench",
+    href: "/workbench",
+    labelKey: "workspace.workbench",
+  },
+]
+
+type WorkspaceSwitcherProps = {
+  currentWorkspace: WorkspaceKey
+  variant?: "sidebar" | "header"
+  className?: string
+  trigger?: ReactElement
+}
+
+export function WorkspaceSwitcher({
+  currentWorkspace,
+  variant = "header",
+  className,
+  trigger,
+}: WorkspaceSwitcherProps) {
+  const t = useI18n()
+  const currentOption =
+    workspaceOptions.find((item) => item.key === currentWorkspace) ?? workspaceOptions[0]
+  const triggerClassName = cn(
+    "gap-2 text-left",
+    variant === "header" &&
+      "h-9 rounded-md border border-border/70 bg-background px-2.5 shadow-xs hover:bg-muted",
+    variant === "sidebar" && "data-[slot=sidebar-menu-button]:p-1.5!",
+    className
+  )
+  const triggerContent = (
+    <>
+      <img
+        src="/images/logo.svg"
+        alt={t("app.brand")}
+        width="32"
+        height="32"
+        className="size-7 shrink-0 object-contain"
+      />
+      <div className="grid min-w-0 flex-1 text-left leading-tight">
+        <span className="truncate text-sm font-semibold">{t("app.brand")}</span>
+        <span className="truncate text-xs text-muted-foreground">
+          {t(currentOption.labelKey)}
+        </span>
+      </div>
+      <ChevronsUpDownIcon className="ml-auto size-4 shrink-0 text-muted-foreground" />
+    </>
+  )
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          trigger ?? <Button variant="ghost" className={triggerClassName} />
+        }
+      >
+        {triggerContent}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="start"
+        side={variant === "sidebar" ? "right" : "bottom"}
+        sideOffset={8}
+        className="w-60 min-w-60"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{t("workspace.switchWorkspace")}</DropdownMenuLabel>
+          {workspaceOptions.map((item) => (
+            <DropdownMenuItem
+              key={item.key}
+              render={<Link href={item.href} />}
+              className="cursor-pointer gap-2"
+            >
+              <span className="flex-1 truncate">{t(item.labelKey)}</span>
+              {item.key === currentWorkspace ? (
+                <CheckIcon className="size-4 text-primary" />
+              ) : null}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
@@ -0,0 +1,94 @@
+import { mkdirSync } from "node:fs";
+import { test, expect, type Page } from "@playwright/test";
+
+const baseUrl = process.env.E2E_BASE_URL ?? "http://localhost:3000";
+const username = process.env.E2E_USERNAME ?? "admin";
+const password = process.env.E2E_PASSWORD ?? "";
+const reportDir =
+  process.env.E2E_REPORT_DIR ??
+  "../docs/superpowers/test-reports/2026-06-13-support-workbench";
+
+mkdirSync(reportDir, { recursive: true });
+
+test.use({
+  launchOptions: {
+    channel: "chrome",
+  },
+});
+
+async function screenshot(page: Page, name: string) {
+  await page.screenshot({
+    path: `${reportDir}/${name}.png`,
+    fullPage: true,
+  });
+}
+
+async function login(page: Page) {
+  await page.goto(`${baseUrl}/workbench/`);
+  await expect(page).toHaveURL(/\/dashboard\/login/);
+  await screenshot(page, "01-login-redirect");
+
+  await page.locator("#username").fill(username);
+  await page.locator("#password").fill(password);
+  await screenshot(page, "02-login-filled");
+
+  const loginResponsePromise = page.waitForResponse(
+    (response) =>
+      response.url().includes("/api/auth/login") && response.status() === 200,
+    { timeout: 15000 },
+  );
+  await page.locator('form button[type="submit"]').click();
+  const loginResponse = await loginResponsePromise;
+  console.log("login response", loginResponse.status(), loginResponse.url());
+
+  await page.waitForURL((url) => !url.pathname.startsWith("/dashboard/login"), {
+    timeout: 15000,
+  });
+  await expect
+    .poll(() => page.evaluate(() => Boolean(window.localStorage.getItem("agent-desk-session"))))
+    .toBe(true);
+}
+
+test.describe("support workbench", () => {
+  test("logs in and switches between workbench and dashboard", async ({ page }) => {
+    const runtimeErrors: string[] = [];
+    page.on("pageerror", (error) => {
+      runtimeErrors.push(error.stack || error.message);
+    });
+    page.on("console", (message) => {
+      if (message.type() === "error") {
+        runtimeErrors.push(message.text());
+      }
+    });
+
+    await login(page);
+    await page.goto(`${baseUrl}/workbench/`);
+    await page.waitForLoadState("networkidle");
+    await screenshot(page, "03-workbench-initial");
+
+    await expect(page.getByText(/客服工作台|Support Workbench/).first()).toBeVisible();
+    await page.getByRole("button", { name: /贝壳AGENT|Shell Agent/i }).first().click();
+    await expect(page.getByText(/切换工作区|Switch workspace/)).toBeVisible();
+    await expect(page.getByRole("menuitem", { name: /管理后台|Admin Dashboard/ })).toBeVisible();
+    await page.waitForTimeout(300);
+    await screenshot(page, "04-workbench-switcher-open");
+
+    await page.getByRole("menuitem", { name: /管理后台|Admin Dashboard/ }).click();
+    await page.waitForURL(/\/dashboard\/?$/, { timeout: 15000 });
+    await page.waitForLoadState("networkidle");
+    await screenshot(page, "05-dashboard-after-switch");
+    await expect(page.getByText(/管理后台|Admin Dashboard/).first()).toBeVisible();
+
+    await page.getByRole("button", { name: /贝壳AGENT|Shell Agent/i }).first().click();
+    await expect(page.getByRole("menuitem", { name: /客服工作台|Support Workbench/ })).toBeVisible();
+    await page.waitForTimeout(300);
+    await screenshot(page, "06-dashboard-switcher-open");
+    await page.getByRole("menuitem", { name: /客服工作台|Support Workbench/ }).click();
+    await page.waitForURL(/\/workbench\/?$/, { timeout: 15000 });
+    await page.waitForLoadState("networkidle");
+    await screenshot(page, "07-workbench-after-return");
+    await expect(page.getByText(/客服工作台|Support Workbench/).first()).toBeVisible();
+
+    expect(runtimeErrors).toEqual([]);
+  });
+});
@@ -2351,6 +2351,11 @@
    "changePassword": "Change Password",
    "signOut": "Sign Out"
  },
+  "workspace": {
+    "dashboard": "Admin Dashboard",
+    "workbench": "Support Workbench",
+    "switchWorkspace": "Switch workspace"
+  },
  "theme": {
    "toggle": "Change theme",
    "light": "Light",
@@ -2351,6 +2351,11 @@
    "changePassword": "修改密码",
    "signOut": "退出登录"
  },
+  "workspace": {
+    "dashboard": "管理后台",
+    "workbench": "客服工作台",
+    "switchWorkspace": "切换工作区"
+  },
  "theme": {
    "toggle": "切换主题",
    "light": "浅色模式",
@@ -30,5 +30,5 @@
    ".next/dev/types/**/*.ts",
    "**/*.mts"
  ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "e2e"]
 }