Add Runn-style allocation menu actions and multi-select.

Wire Transfer, Clone, extend-to-visible-range, and bulk delete from the allocation popover and timeline.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/projects/AllocationCreatePopover.tsx

@@ -46,6 +46,12 @@ interface AllocationCreatePopoverProps {
   onSave: (draft: AllocationDragDraft) => void;
   onUpdate?: (draft: AllocationDragDraft) => void;
   onDelete?: () => void;
+  transferPeople?: Person[];
+  onTransfer?: (personId: number) => void;
+  onClone?: () => void;
+  onSelectAllToRight?: () => void;
+  onToggleMultiSelect?: () => void;
+  multiSelectActive?: boolean;
   isSaving?: boolean;
 }
 
@@ -69,6 +75,12 @@ export function AllocationCreatePopover({
   onSave,
   onUpdate,
   onDelete,
+  transferPeople = [],
+  onTransfer,
+  onClone,
+  onSelectAllToRight,
+  onToggleMultiSelect,
+  multiSelectActive = false,
   isSaving = false,
 }: AllocationCreatePopoverProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
@@ -91,6 +103,7 @@ export function AllocationCreatePopover({
   const [note, setNote] = useState("");
   const [datesOpen, setDatesOpen] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [transferOpen, setTransferOpen] = useState(false);
 
   const selectedPerson =
     fixedPerson ?? people.find((person) => person.id === Number(personId));
@@ -118,6 +131,7 @@ export function AllocationCreatePopover({
     setPersonId(fixedPerson?.id ?? people[0]?.id ?? "");
     setDatesOpen(false);
     setMenuOpen(false);
+    setTransferOpen(false);
 
     const editPerson = allocation
       ? (fixedPerson ?? people.find((person) => person.id === allocation.person_id))
@@ -375,6 +389,7 @@ export function AllocationCreatePopover({
             onClick={() => {
               setDatesOpen((open) => !open);
               setMenuOpen(false);
+              setTransferOpen(false);
             }}
             type="button"
           >
@@ -392,45 +407,111 @@ export function AllocationCreatePopover({
               <MoreHorizontal size={18} />
             </button>
             {menuOpen ? (
-              <div className="runn-menu">
-                {!isEdit ? (
-                  <label className="runn-menu-item">
-                    <input
-                      checked={repeatEnabled}
-                      onChange={(event) => setRepeatEnabled(event.target.checked)}
-                      type="checkbox"
-                    />
-                    Repeat weekly
-                  </label>
-                ) : null}
-                {repeatEnabled && !isEdit ? (
+              <div className="runn-menu runn-menu-actions">
+                {isEdit ? (
+                  <>
+                    <button
+                      className="runn-menu-action"
+                      onClick={() => setTransferOpen((open) => !open)}
+                      type="button"
+                    >
+                      Transfer
+                    </button>
+                    {transferOpen && transferPeople.length > 0 ? (
+                      <div className="runn-menu-sub">
+                        <select
+                          onChange={(event) => {
+                            const id = Number(event.target.value);
+                            if (id) onTransfer?.(id);
+                            setMenuOpen(false);
+                            setTransferOpen(false);
+                          }}
+                          value=""
+                        >
+                          <option value="">Choose person…</option>
+                          {transferPeople.map((person) => (
+                            <option key={person.id} value={person.id}>
+                              {person.name}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    ) : null}
+                    <button
+                      className="runn-menu-action"
+                      onClick={() => {
+                        onClone?.();
+                        setMenuOpen(false);
+                      }}
+                      type="button"
+                    >
+                      Clone
+                    </button>
+                    <button
+                      className="runn-menu-action"
+                      onClick={() => {
+                        const last = dayDates.length
+                          ? format(dayDates[dayDates.length - 1], "yyyy-MM-dd")
+                          : rangeEnd;
+                        setRangeEnd(last);
+                        onSelectAllToRight?.();
+                        setMenuOpen(false);
+                      }}
+                      type="button"
+                    >
+                      Select All to Right
+                    </button>
+                    <button
+                      className="runn-menu-action"
+                      onClick={() => {
+                        onToggleMultiSelect?.();
+                        setMenuOpen(false);
+                      }}
+                      type="button"
+                    >
+                      {multiSelectActive ? "Disable Multi-Select Mode" : "Enable Multi-Select Mode"}
+                    </button>
+                  </>
+                ) : (
                   <>
                     <label className="runn-menu-item">
-                      End on
-                      <input
-                        onChange={(event) => {
-                          setRepeatEndMode("on");
-                          setRepeatEndOn(event.target.value);
-                        }}
-                        type="date"
-                        value={repeatEndOn}
-                      />
-                    </label>
-                    <label className="runn-menu-item">
-                      After
                       <input
-                        min={1}
-                        onChange={(event) => {
-                          setRepeatEndMode("after");
-                          setRepeatOccurrences(Math.max(1, Number(event.target.value) || 1));
-                        }}
-                        type="number"
-                        value={repeatOccurrences}
+                        checked={repeatEnabled}
+                        onChange={(event) => setRepeatEnabled(event.target.checked)}
+                        type="checkbox"
                       />
-                      times
+                      Repeat weekly
                     </label>
+                    {repeatEnabled ? (
+                      <>
+                        <label className="runn-menu-item">
+                          End on
+                          <input
+                            onChange={(event) => {
+                              setRepeatEndMode("on");
+                              setRepeatEndOn(event.target.value);
+                            }}
+                            type="date"
+                            value={repeatEndOn}
+                          />
+                        </label>
+                        <label className="runn-menu-item">
+                          After
+                          <input
+                            min={1}
+                            onChange={(event) => {
+                              setRepeatEndMode("after");
+                              setRepeatOccurrences(Math.max(1, Number(event.target.value) || 1));
+                            }}
+                            type="number"
+                            value={repeatOccurrences}
+                          />
+                          times
+                        </label>
+                      </>
+                    ) : null}
                   </>
-                ) : null}
+                )}
               </div>
             ) : null}
           </div>

frontend/src/components/projects/AllocationDragTimeline.tsx

@@ -19,12 +19,20 @@ interface AllocationDragTimelineProps {
   color: string;
   fixedPerson?: Person;
   candidatePeople?: Person[];
+  transferPeople?: Person[];
   allocation?: Allocation;
   weeklyCapacityHrs?: number;
   allocationPct?: number;
   onSave: (draft: AllocationDragDraft) => Promise<Allocation | undefined> | Allocation | undefined;
   onUpdate?: (draft: AllocationDragDraft) => void;
   onDelete?: (allocation: Allocation) => void;
+  onTransfer?: (personId: number) => void;
+  onClone?: () => void;
+  onSelectAllToRight?: () => void;
+  onToggleMultiSelect?: () => void;
+  multiSelectActive?: boolean;
+  selected?: boolean;
+  onToggleSelect?: () => void;
   isSaving?: boolean;
   effortMode?: EffortDisplayMode;
 }
@@ -40,6 +48,14 @@ export function AllocationDragTimeline({
   onSave,
   onUpdate,
   onDelete,
+  transferPeople = [],
+  onTransfer,
+  onClone,
+  onSelectAllToRight,
+  onToggleMultiSelect,
+  multiSelectActive = false,
+  selected = false,
+  onToggleSelect,
   isSaving = false,
   effortMode = "hours",
 }: AllocationDragTimelineProps) {
@@ -79,6 +95,10 @@ export function AllocationDragTimeline({
   const openEditPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (!allocation) return;
     event.stopPropagation();
+    if (multiSelectActive && onToggleSelect) {
+      onToggleSelect();
+      return;
+    }
     const rect = event.currentTarget.getBoundingClientRect();
     openPopoverAt(
       allocation.start_date,
@@ -164,7 +184,7 @@ export function AllocationDragTimeline({
         ) : null}
         {existingSegment && weeklyCapacityHrs !== undefined && allocationPct !== undefined && allocation ? (
           <button
-            className={`${existingSegment.className}${visibleWeekdayCount(dayDates, allocation.start_date, allocation.end_date) <= 1 ? " is-pill" : ""}`}
+            className={`${existingSegment.className}${visibleWeekdayCount(dayDates, allocation.start_date, allocation.end_date) <= 1 ? " is-pill" : ""}${selected ? " is-selected" : ""}`}
             onClick={openEditPopover}
             onPointerDown={(event) => event.stopPropagation()}
             onPointerUp={(event) => event.stopPropagation()}
@@ -237,6 +257,40 @@ export function AllocationDragTimeline({
           defaultHoursPerDay={
             fixedPerson ? roundToHalfHour(fixedPerson.weekly_capacity_hrs / 5) : undefined
           }
+          multiSelectActive={multiSelectActive}
+          onClone={
+            editingAllocation && onClone
+              ? () => {
+                  onClone();
+                  setPopover(null);
+                }
+              : undefined
+          }
+          onSelectAllToRight={
+            editingAllocation && onSelectAllToRight
+              ? () => {
+                  onSelectAllToRight();
+                  setPopover(null);
+                }
+              : undefined
+          }
+          onToggleMultiSelect={
+            onToggleMultiSelect
+              ? () => {
+                  onToggleMultiSelect();
+                  setPopover(null);
+                }
+              : undefined
+          }
+          onTransfer={
+            editingAllocation && onTransfer
+              ? (personId) => {
+                  onTransfer(personId);
+                  setPopover(null);
+                }
+              : undefined
+          }
+          transferPeople={transferPeople}
         />
       ) : null}
     </>

frontend/src/components/projects/ProjectPlannerBlock.tsx

@@ -36,6 +36,13 @@ interface ProjectPlannerBlockProps {
   onCreateAllocation: (draft: AllocationDragDraft) => Promise<Allocation | undefined>;
   onUpdateAllocation: (allocation: Allocation, draft: AllocationDragDraft) => void;
   onDeleteAllocation: (allocation: Allocation) => void;
+  onTransferAllocation?: (allocation: Allocation, personId: number) => void;
+  onCloneAllocation?: (allocation: Allocation) => void;
+  onExtendAllocationRight?: (allocation: Allocation) => void;
+  multiSelectMode?: boolean;
+  selectedAllocationIds?: Set<number>;
+  onToggleAllocationSelect?: (allocationId: number) => void;
+  onToggleMultiSelectMode?: () => void;
   onCreateMilestone: (dueDate: string, name: string, note?: string) => void;
   onCreatePhase: (input: {
     name: string;
@@ -69,6 +76,13 @@ export function ProjectPlannerBlock({
   onCreateAllocation,
   onUpdateAllocation,
   onDeleteAllocation,
+  onTransferAllocation,
+  onCloneAllocation,
+  onExtendAllocationRight,
+  multiSelectMode = false,
+  selectedAllocationIds,
+  onToggleAllocationSelect,
+  onToggleMultiSelectMode,
   onCreateMilestone,
   onCreatePhase,
   onToggleTentative,
@@ -278,6 +292,9 @@ export function ProjectPlannerBlock({
               {group.allocations.map((allocation) => {
                 const person = peopleById.get(allocation.person_id);
                 if (!person) return null;
+                const transferCandidates = people.filter(
+                  (candidate) => candidate.is_active && candidate.id !== allocation.person_id,
+                );
                 return (
                   <div className="planner-row planner-project-subrow planner-member-row" key={allocation.id}>
                     <div className="planner-row-label nested member">
@@ -296,9 +313,27 @@ export function ProjectPlannerBlock({
                         effortMode={effortMode}
                         fixedPerson={person}
                         isSaving={isSavingAllocation}
+                        multiSelectActive={multiSelectMode}
+                        onClone={onCloneAllocation ? () => onCloneAllocation(allocation) : undefined}
                         onDelete={(item) => onDeleteAllocation(item)}
                         onSave={onCreateAllocation}
+                        onSelectAllToRight={
+                          onExtendAllocationRight ? () => onExtendAllocationRight(allocation) : undefined
+                        }
+                        onToggleMultiSelect={onToggleMultiSelectMode}
+                        onToggleSelect={
+                          onToggleAllocationSelect
+                            ? () => onToggleAllocationSelect(allocation.id)
+                            : undefined
+                        }
+                        onTransfer={
+                          onTransferAllocation
+                            ? (personId) => onTransferAllocation(allocation, personId)
+                            : undefined
+                        }
                         onUpdate={(draft) => onUpdateAllocation(allocation, draft)}
+                        selected={selectedAllocationIds?.has(allocation.id) ?? false}
+                        transferPeople={transferCandidates}
                         weeklyCapacityHrs={person.weekly_capacity_hrs}
                       />
                     </div>

frontend/src/pages/Projects.tsx

@@ -13,6 +13,7 @@ import {
   updateProject,
 } from "../api/projects";
 import type { AllocationDragDraft } from "../components/projects/AllocationCreatePopover";
+import { draftFromAllocation, endDateThroughVisibleRange } from "../planner/allocationActions";
 import { expandWeeklyRepeat } from "../planner/allocationRepeat";
 import { SelectorDropdown, Toggle } from "../components/planner/PlannerControls";
 import { AddProjectMemberModal } from "../components/projects/AddProjectMemberModal";
@@ -104,6 +105,9 @@ export function ProjectsPage() {
     localStorage.setItem("projects-effort-mode", effortMode);
   }, [effortMode]);
 
+  const [multiSelectMode, setMultiSelectMode] = useState(false);
+  const [selectedAllocationIds, setSelectedAllocationIds] = useState<Set<number>>(new Set());
+
   const rangeWeeks = RANGE_OPTIONS.find((option) => option.value === range)?.weeks ?? 5;
   const startDate = anchor;
   const endDate = addWeeks(startDate, rangeWeeks);
@@ -295,6 +299,7 @@ export function ProjectsPage() {
         end_date: draft.end_date,
         allocation_pct: draft.allocation_pct,
         note: draft.note ?? null,
+        ...(draft.person_id !== undefined ? { person_id: draft.person_id } : {}),
       }),
     onSuccess: () => {
       invalidate();
@@ -320,6 +325,58 @@ export function ProjectsPage() {
     deleteAllocationMutation.mutate(allocation.id);
   };
 
+  const handleTransferAllocation = (
+    _projectId: number,
+    allocation: Allocation,
+    personId: number,
+  ) => {
+    updateAllocationMutation.mutate({
+      id: allocation.id,
+      draft: { ...draftFromAllocation(allocation), person_id: personId } as AllocationDragDraft,
+    });
+  };
+
+  const handleCloneAllocation = async (projectId: number, allocation: Allocation) => {
+    const base = draftFromAllocation(allocation);
+    await createAllocation({
+      person_id: base.person_id,
+      project_id: projectId,
+      start_date: base.start_date,
+      end_date: base.end_date,
+      allocation_pct: base.allocation_pct,
+      note: base.note ?? null,
+    });
+    invalidate();
+    push("Assignment cloned", "success");
+  };
+
+  const handleExtendAllocationRight = (projectId: number, allocation: Allocation) => {
+    const end = endDateThroughVisibleRange(plannerDays, allocation.start_date);
+    updateAllocationMutation.mutate({
+      id: allocation.id,
+      draft: { ...draftFromAllocation(allocation), end_date: end } as AllocationDragDraft,
+    });
+  };
+
+  const toggleAllocationSelection = (allocationId: number) => {
+    setSelectedAllocationIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(allocationId)) next.delete(allocationId);
+      else next.add(allocationId);
+      return next;
+    });
+  };
+
+  const deleteSelectedAllocations = async () => {
+    for (const id of selectedAllocationIds) {
+      await deleteAllocation(id);
+    }
+    setSelectedAllocationIds(new Set());
+    setMultiSelectMode(false);
+    invalidate();
+    push("Selected assignments deleted", "success");
+  };
+
   const isSavingAllocation =
     createAllocationMutation.isPending ||
     updateAllocationMutation.isPending ||
@@ -643,6 +700,24 @@ export function ProjectsPage() {
                               });
                             }}
                             onDeleteAllocation={(allocation) => handleDeleteAllocation(project.id, allocation)}
+                            onCloneAllocation={(allocation) => {
+                              void handleCloneAllocation(project.id, allocation);
+                            }}
+                            onExtendAllocationRight={(allocation) =>
+                              handleExtendAllocationRight(project.id, allocation)
+                            }
+                            onTransferAllocation={(allocation, personId) =>
+                              handleTransferAllocation(project.id, allocation, personId)
+                            }
+                            multiSelectMode={multiSelectMode}
+                            onToggleAllocationSelect={toggleAllocationSelection}
+                            onToggleMultiSelectMode={() => {
+                              setMultiSelectMode((active) => {
+                                if (active) setSelectedAllocationIds(new Set());
+                                return !active;
+                              });
+                            }}
+                            selectedAllocationIds={selectedAllocationIds}
                             onUpdateAllocation={(allocation, draft) =>
                               handleUpdateAllocation(project.id, allocation, draft)
                             }
@@ -686,6 +761,37 @@ export function ProjectsPage() {
               </button>
               <div className="planner-row-track" />
             </div>
+
+            {multiSelectMode ? (
+              <div className="planner-multi-select-bar">
+                <span>
+                  {selectedAllocationIds.size === 0
+                    ? "Multi-select: click assignments to select"
+                    : `${selectedAllocationIds.size} selected`}
+                </span>
+                <div className="planner-multi-select-actions">
+                  {selectedAllocationIds.size > 0 ? (
+                    <button
+                      className="ghost-button danger"
+                      onClick={() => void deleteSelectedAllocations()}
+                      type="button"
+                    >
+                      Delete selected
+                    </button>
+                  ) : null}
+                  <button
+                    className="ghost-button"
+                    onClick={() => {
+                      setMultiSelectMode(false);
+                      setSelectedAllocationIds(new Set());
+                    }}
+                    type="button"
+                  >
+                    Done
+                  </button>
+                </div>
+              </div>
+            ) : null}
           </div>
         </article>
       )}

frontend/src/planner/allocationActions.ts

@@ -0,0 +1,24 @@
+import { format } from "date-fns";
+
+import type { AllocationDragDraft } from "../components/projects/AllocationCreatePopover";
+import type { Allocation } from "../types";
+
+export function draftFromAllocation(allocation: Allocation): Pick<
+  AllocationDragDraft,
+  "person_id" | "start_date" | "end_date" | "allocation_pct" | "note"
+> {
+  return {
+    person_id: allocation.person_id,
+    start_date: allocation.start_date,
+    end_date: allocation.end_date,
+    allocation_pct: allocation.allocation_pct,
+    note: allocation.note ?? undefined,
+  };
+}
+
+/** Extend assignment through the last visible planner day. */
+export function endDateThroughVisibleRange(dayDates: Date[], startDate: string): string {
+  if (dayDates.length === 0) return startDate;
+  const last = format(dayDates[dayDates.length - 1], "yyyy-MM-dd");
+  return last >= startDate ? last : startDate;
+}

frontend/src/styles.css

@@ -2573,6 +2573,71 @@ th {
   gap: 8px;
 }
 
+.runn-menu-actions {
+  gap: 0;
+  min-width: 220px;
+  padding: 4px 0;
+}
+
+.runn-menu-action {
+  background: transparent;
+  border: 0;
+  color: #1e40af;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 14px;
+  text-align: left;
+  width: 100%;
+}
+
+.runn-menu-action:hover {
+  background: #f1f5f9;
+}
+
+.runn-menu-sub {
+  border-top: 1px solid var(--line);
+  padding: 8px 12px 10px;
+}
+
+.runn-menu-sub select {
+  font-size: 13px;
+  width: 100%;
+}
+
+.project-bar.allocation-bar.is-selected {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
+  outline: none;
+}
+
+.planner-multi-select-bar {
+  align-items: center;
+  background: #eff6ff;
+  border-top: 1px solid #bfdbfe;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 10px 16px;
+  position: sticky;
+  bottom: 0;
+  z-index: 5;
+}
+
+.planner-multi-select-bar span {
+  color: #1e3a8a;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.planner-multi-select-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.ghost-button.danger {
+  color: #b91c1c;
+}
+
 .runn-save {
   background: #2563eb;
   border: 0;