feat(web): Tasks board opens next to chat as a top-bar toggle (#4565)

* feat(web): Tasks board opens next to chat as a top-bar toggle

Add a "Tasks" top-toolbar toggle beside Chat and Library (order: Chat ·
Tasks · Library) that opens the org task board next to the chat via
`?main=board`, mirroring the Library overlay — instead of the sidebar
"Board" entry that navigated to a separate route.

- New shared useMainOverlayToggle hook backs both Library and Tasks: toggling
  an overlay OFF restores the tab that was showing when it opened (falling back
  to the agent's default view) instead of blanking the main panel into a
  full-width chat.
- LibraryToggle refactored onto the shared hook (fixes the "close Library →
  giant chat" regression).
- Task board inner view exported as TaskBoardPage and rendered as the `board`
  main-panel tab; the standalone /$org/board route stays for deep links.
- Removed the sidebar "Board" item (useProjectSidebarItems now empty).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(web): rename task board heading to "Tasks"

Match the "Tasks" toggle label — the board panel header now reads "Tasks"
instead of "Board", in both the side-by-side panel and the standalone route.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: vibegui

apps/mesh/src/web/hooks/use-project-sidebar-items.tsx

@@ -1,35 +1,13 @@
-import { useNavigate } from "@tanstack/react-router";
-import { useProjectContext } from "@decocms/mesh-sdk";
-import { Columns03 } from "@untitledui/icons";
 import type { SidebarSection } from "@/web/components/sidebar/types";
-import { useTaskBoardEnabled } from "@/web/hooks/use-organization-settings";
 
 /**
  * Sidebar sections rendered above the thread list. Currently empty — the
  * collapsed rail's new-thread button lives inside the thread list itself
  * (see task-groups-list), alongside the collapse toggle and thread icons.
+ *
+ * The task board ("Tasks") now lives in the top toolbar next to Chat and
+ * Library (see `TasksTab`), not here.
  */
 export function useProjectSidebarItems(): SidebarSection[] {
-  const { org } = useProjectContext();
-  const navigate = useNavigate();
-  const taskBoardEnabled = useTaskBoardEnabled();
-
-  const sections: SidebarSection[] = [];
-
-  if (taskBoardEnabled) {
-    sections.push({
-      type: "items",
-      items: [
-        {
-          key: "board",
-          label: "Board",
-          icon: <Columns03 className="size-4!" />,
-          onClick: () =>
-            navigate({ to: "/$org/board", params: { org: org.slug } }),
-        },
-      ],
-    });
-  }
-
-  return sections;
+  return [];
 }

apps/mesh/src/web/layouts/agent-shell-layout/library-toggle.tsx

@@ -1,7 +1,7 @@
 import { Folder } from "@untitledui/icons";
-import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { HeaderTabButton } from "@/web/layouts/main-panel-tabs/header-tab-button";
 import { track } from "@/web/lib/posthog-client";
+import { useMainOverlayToggle } from "./use-main-overlay-toggle";
 
 /**
  * Library toggle — sits in the LEFT toolbar group beside the Chat toggle.
@@ -10,21 +10,15 @@ import { track } from "@/web/lib/posthog-client";
  * every agent — so it doesn't belong in the per-agent view tab bar on the
  * right. Pinning it next to Chat keeps a stable, always-present entry point
  * that never shuffles as agent-specific tabs (Overview / Preview / …) come and
- * go. Opens `?main=files`; clicking while open closes it (main=0).
+ * go. Opens `?main=files`; clicking while open restores the previously shown
+ * tab (see useMainOverlayToggle) rather than closing the panel outright.
  */
 export function LibraryToggle() {
-  const navigate = useNavigate();
-  const params = useParams({ strict: false }) as {
-    org?: string;
-    taskId?: string;
-  };
-  const search = useSearch({ strict: false }) as { main?: string };
-  const active = search.main === "files";
+  const { active, enabled, toggle } = useMainOverlayToggle("files");
 
   // Needs a task route to toggle the main panel against; render nothing on
   // routes without one.
-  if (!params.org || !params.taskId) return null;
-  const { org, taskId } = params;
+  if (!enabled) return null;
 
   return (
     <HeaderTabButton
@@ -37,15 +31,7 @@ export function LibraryToggle() {
           button: "library",
           next_state: active ? "closed" : "open",
         });
-        navigate({
-          to: "/$org/$taskId",
-          params: { org, taskId },
-          search: (prev: Record<string, unknown>) => ({
-            ...prev,
-            main: active ? "0" : "files",
-          }),
-          replace: true,
-        });
+        toggle();
       }}
     />
   );

apps/mesh/src/web/layouts/agent-shell-layout/tasks-toggle.tsx

@@ -0,0 +1,34 @@
+import { Columns03 } from "@untitledui/icons";
+import { HeaderTabButton } from "@/web/layouts/main-panel-tabs/header-tab-button";
+import { useTaskBoardEnabled } from "@/web/hooks/use-organization-settings";
+import { track } from "@/web/lib/posthog-client";
+import { useMainOverlayToggle } from "./use-main-overlay-toggle";
+
+/**
+ * Tasks toggle — the org task board, opened next to the chat like the Library
+ * (via `?main=board`) rather than as a separate route. Sits in the LEFT toolbar
+ * group after Chat and Library. Agent-independent, so it's a left-group toggle,
+ * not a per-agent view tab. Gated on the org's `task_board_enabled` setting.
+ */
+export function TasksToggle() {
+  const taskBoardEnabled = useTaskBoardEnabled();
+  const { active, enabled, toggle } = useMainOverlayToggle("board");
+
+  if (!taskBoardEnabled || !enabled) return null;
+
+  return (
+    <HeaderTabButton
+      title="Tasks"
+      icon={{ kind: "component", Component: Columns03 }}
+      active={active}
+      className="wco-no-drag h-10 md:h-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+      onClick={() => {
+        track("agent_toolbar_toggled", {
+          button: "tasks",
+          next_state: active ? "closed" : "open",
+        });
+        toggle();
+      }}
+    />
+  );
+}

apps/mesh/src/web/layouts/agent-shell-layout/toggle-buttons.tsx

@@ -2,6 +2,7 @@ import { MessageCircle01 } from "@untitledui/icons";
 import { HeaderTabButton } from "@/web/layouts/main-panel-tabs/header-tab-button";
 import { track } from "@/web/lib/posthog-client";
 import { LibraryToggle } from "./library-toggle";
+import { TasksToggle } from "./tasks-toggle";
 
 export interface ToggleButtonsProps {
   chatOpen: boolean;
@@ -41,8 +42,11 @@ export function ToggleButtons({
           toggleChat();
         }}
       />
-      {/* Library is agent-independent, so it lives here in the left group next
-          to Chat rather than in the per-agent tab bar on the right. */}
+      {/* Tasks and Library are agent-independent, so they live here in the left
+          group next to Chat rather than in the per-agent tab bar on the right.
+          Both open next to the chat as main-panel overlays. Order: Chat · Tasks
+          · Library. */}
+      <TasksToggle />
       <LibraryToggle />
     </>
   );

apps/mesh/src/web/layouts/agent-shell-layout/use-main-overlay-toggle.ts

@@ -0,0 +1,59 @@
+import { useRef } from "react";
+import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
+
+/**
+ * A left-toolbar overlay toggle (Library, Tasks) — swaps the main panel's
+ * active tab for an agent-independent view (`?main=<overlayTabId>`).
+ *
+ * Toggling OFF restores whatever tab was showing when the overlay opened
+ * instead of blanking the panel — closing the Library over a "chat + Overview"
+ * layout must return to the Overview, not leave a full-width chat. When there's
+ * no remembered tab (e.g. the user deep-linked straight into the overlay), it
+ * falls back to the agent's default view by dropping the `main` param.
+ *
+ * The remembered tab lives in a ref, which survives `?main` changes because the
+ * toolbar stays mounted for the life of the task route.
+ */
+export function useMainOverlayToggle(overlayTabId: string): {
+  active: boolean;
+  enabled: boolean;
+  toggle: () => void;
+} {
+  const navigate = useNavigate();
+  const params = useParams({ strict: false }) as {
+    org?: string;
+    taskId?: string;
+  };
+  const search = useSearch({ strict: false }) as { main?: string };
+  const active = search.main === overlayTabId;
+  const prevTab = useRef<string | undefined>(undefined);
+
+  const enabled = !!(params.org && params.taskId);
+
+  const toggle = () => {
+    if (!params.org || !params.taskId) return;
+    const org = params.org;
+    const taskId = params.taskId;
+    navigate({
+      to: "/$org/$taskId",
+      params: { org, taskId },
+      search: (prev: Record<string, unknown>) => {
+        const next = { ...prev };
+        if (active) {
+          // Restore the tab we replaced. A missing value means "the agent's
+          // default view", represented by dropping `main` entirely.
+          const restore = prevTab.current;
+          if (restore && restore !== overlayTabId) next.main = restore;
+          else delete next.main;
+        } else {
+          prevTab.current = search.main;
+          next.main = overlayTabId;
+        }
+        return next;
+      },
+      replace: true,
+    });
+  };
+
+  return { active, enabled, toggle };
+}

apps/mesh/src/web/layouts/main-panel-tabs/index.tsx

@@ -12,6 +12,7 @@ import { Suspense, lazy } from "react";
 import { useMainPanelTabs } from "./use-main-panel-tabs";
 import { SettingsTab } from "./settings-tab";
 import { OverviewTab } from "./overview-tab";
+import { TaskBoardPage } from "@/web/layouts/task-board";
 import { GitTab } from "@/web/components/thread/github/git-tab";
 import { PreviewBlocksTab } from "./preview-blocks-tab";
 import { CodeTab } from "./code-tab";
@@ -72,6 +73,16 @@ function TabBody({
   if (activeTab === "overview") {
     return <OverviewTab />;
   }
+  if (activeTab === "board") {
+    // Task board opened next to chat via the Tasks toggle (`?main=board`).
+    // The main panel already supplies the card chrome, so render the inner
+    // page inside a full-height flex column (mirrors the standalone route).
+    return (
+      <div className="flex h-full min-h-0 flex-col overflow-hidden">
+        <TaskBoardPage />
+      </div>
+    );
+  }
   if (isLegacySettingsTab(activeTab)) {
     return <SettingsTab virtualMcpId={virtualMcpId} />;
   }

apps/mesh/src/web/layouts/task-board/index.tsx

@@ -77,7 +77,7 @@ function DueDatePill({ iso }: { iso: string }) {
   );
 }
 
-function TaskBoardPage() {
+export function TaskBoardPage() {
   const { items, isLoading } = useTaskBoardItems();
   const actions = useTaskBoardItemActions();
   const { data: membersData } = useMembers();
@@ -114,7 +114,7 @@ function TaskBoardPage() {
           layout === "board" ? "max-w-[1400px]" : "max-w-[900px]",
         )}
       >
-        <h1 className="text-xl font-medium text-foreground">Board</h1>
+        <h1 className="text-xl font-medium text-foreground">Tasks</h1>
 
         <div className="flex flex-wrap items-center gap-2">
           <Button size="sm" onClick={openCreate}>