fix(ui): make watch-list drops land visibly

A dropped task only rendered if it happened to be in the viewer's loaded
task list, so drops of anything else stored a reference and showed
nothing. Watch entries now capture the title at drop time (rows put it
on the drag payload alongside the id), the list synthesizes a row for
any watched task the query doesn't hold, and a toast confirms each add.
Legacy bare-id entries are normalized on read.

Generated-By: PostHog Code
Task-Id: 0331ac58-0a1c-4b4e-b884-2ff7d8e71986

Author: puemos

packages/ui/src/features/canvas/components/ChannelItemRow.tsx

@@ -277,13 +277,16 @@ export function ChannelItemRow({
               label={<span>{item.title}</span>}
               isActive={isActive}
               onClick={() => actions.open(item)}
-              // Tasks drag into the Command Center grid, which accepts this
-              // payload type — same contract as the code sidebar's TaskItem.
+              // Tasks drag into the Command Center grid and the sidebar's
+              // watch list, which accept this payload type — same contract as
+              // the code sidebar's TaskItem. The title rides along so a drop
+              // target can keep a legible reference without refetching.
               draggable={item.kind === "task"}
               onDragStart={
                 item.kind === "task"
                   ? (e) => {
                       e.dataTransfer.setData("text/x-task-id", item.id);
+                      e.dataTransfer.setData("text/x-task-title", item.title);
                       e.dataTransfer.effectAllowed = "copy";
                     }
                   : undefined

packages/ui/src/features/canvas/components/WatchListSection.tsx

@@ -14,7 +14,10 @@ import {
   PERSONAL_CHANNEL_NAME,
   useTaskChannels,
 } from "@posthog/ui/features/canvas/hooks/useTaskChannels";
-import { useSpacesSidebarStore } from "@posthog/ui/features/canvas/stores/spacesSidebarStore";
+import {
+  useSpacesSidebarStore,
+  type WatchedTaskRef,
+} from "@posthog/ui/features/canvas/stores/spacesSidebarStore";
 import { usePinnedTasks } from "@posthog/ui/features/sidebar/usePinnedTasks";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
 import { toast } from "@posthog/ui/primitives/toast";
@@ -49,10 +52,23 @@ export function WatchListSection() {
   const { pinnedTaskIds, togglePin } = usePinnedTasks();
   const { archiveTask } = useArchiveTask({ navigateSpace: "website" });
 
+  // Older builds persisted bare id strings; treat them as minimal refs.
+  const watchedRefs = useMemo<WatchedTaskRef[]>(
+    () =>
+      (watchList as unknown as (WatchedTaskRef | string)[]).map((entry) =>
+        typeof entry === "string"
+          ? { id: entry, title: "Untitled task", addedAt: 0 }
+          : entry,
+      ),
+    [watchList],
+  );
+
   // Same item shape the space lists use, held in watch-list order (newest
-  // watched first) rather than the builder's recency sort.
+  // watched first) rather than the builder's recency sort. A watched task the
+  // viewer's task list doesn't hold (someone else's, or beyond the page) still
+  // renders, from the reference captured at drop time.
   const items = useMemo<ChannelItemModel[]>(() => {
-    const watched = new Set(watchList);
+    const watched = new Set(watchedRefs.map((entry) => entry.id));
     const built = buildChannelItems({
       dashboards: [],
       feedTasks: allTasks.filter((t) => watched.has(t.id)),
@@ -61,8 +77,24 @@ export function WatchListSection() {
       ownedBy: null,
     });
     const byId = new Map(built.map((item) => [item.id, item]));
-    return watchList.flatMap((id) => byId.get(id) ?? []);
-  }, [watchList, allTasks, archivedTaskIds, pinnedTaskIds]);
+    return watchedRefs.map(
+      (entry) =>
+        byId.get(entry.id) ?? {
+          key: `task:${entry.id}`,
+          kind: "task" as const,
+          id: entry.id,
+          title: entry.title,
+          ts: entry.addedAt,
+          pinned: pinnedTaskIds.has(entry.id),
+          rawStatus: null,
+          authorUser: null,
+          authorName: null,
+          authorUuid: null,
+          templateId: null,
+          task: null,
+        },
+    );
+  }, [watchedRefs, allTasks, archivedTaskIds, pinnedTaskIds]);
 
   // Each task's space: backend channel → display name → folder channel (which
   // the routes need). Unmapped tasks open under #me and carry no label.
@@ -133,7 +165,14 @@ export function WatchListSection() {
     const taskId = e.dataTransfer.getData("text/x-task-id");
     if (!taskId) return;
     e.preventDefault();
-    addToWatchList(taskId);
+    // Title from the drag payload where the source provides it (channel
+    // rows); the loaded task list covers drags from the code sidebar.
+    const title =
+      e.dataTransfer.getData("text/x-task-title") ||
+      allTasks.find((t) => t.id === taskId)?.title ||
+      "Untitled task";
+    addToWatchList({ id: taskId, title, addedAt: Date.now() });
+    toast.success("Added to watch list", { description: title });
   };
 
   return (

packages/ui/src/features/canvas/stores/spacesSidebarStore.ts

@@ -1,6 +1,17 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
+/**
+ * A watched task, self-sufficient for rendering: the title and added-at are
+ * captured at drop time so a reference stays legible even when the task isn't
+ * in the viewer's loaded task list (someone else's, or beyond the page).
+ */
+export interface WatchedTaskRef {
+  id: string;
+  title: string;
+  addedAt: number;
+}
+
 /**
  * View state for the static spaces sidebar: per-space expands, and the
  * "All spaces" list toggle. `openSections` stores explicit space expansion
@@ -21,16 +32,16 @@ interface SpacesSidebarState {
   /** The watch list section's fold. */
   openWatchList: boolean;
   /**
-   * Task ids the user dragged into the watch list, newest first. Local-only
+   * Tasks the user dragged into the watch list, newest first. Local-only
    * references for now — watching doesn't touch the task or its space.
    */
-  watchList: string[];
+  watchList: WatchedTaskRef[];
   toggle: (channelId: string) => void;
   toggleAddSpace: () => void;
   toggleOnlyMyTasks: () => void;
   toggleWatchList: () => void;
   setSpaceOrder: (ids: string[]) => void;
-  addToWatchList: (taskId: string) => void;
+  addToWatchList: (ref: WatchedTaskRef) => void;
   removeFromWatchList: (taskId: string) => void;
 }
 
@@ -59,13 +70,16 @@ export const useSpacesSidebarStore = create<SpacesSidebarState>()(
       toggleWatchList: () =>
         set((state) => ({ openWatchList: !state.openWatchList })),
       setSpaceOrder: (ids) => set({ spaceOrder: ids }),
-      addToWatchList: (taskId) =>
+      addToWatchList: (ref) =>
         set((state) => ({
-          watchList: [taskId, ...state.watchList.filter((id) => id !== taskId)],
+          watchList: [
+            ref,
+            ...state.watchList.filter((entry) => entry.id !== ref.id),
+          ],
         })),
       removeFromWatchList: (taskId) =>
         set((state) => ({
-          watchList: state.watchList.filter((id) => id !== taskId),
+          watchList: state.watchList.filter((entry) => entry.id !== taskId),
         })),
     }),
     { name: "spaces-sidebar" },