Add Hours/Days effort toggle and simplify project timeline row.

Let planners switch allocation labels and totals between hours and days, and keep schedule dates in the drawer instead of drawing a span line on the project row.

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

frontend/src/components/projects/AllocationDragTimeline.tsx

@@ -5,9 +5,11 @@ import {
   buildAllocationBarSegment,
   dateStringsFromDayIndices,
   dayIndexFromPointer,
-  formatHoursPerDay,
+  formatAllocationEffort,
   projectBarStyle,
   roundToHalfHour,
+  visibleWeekdayCount,
+  type EffortDisplayMode,
 } from "../../planner/allocationTimeline";
 import type { Allocation, Person } from "../../types";
 import { AllocationCreatePopover, type AllocationDragDraft } from "./AllocationCreatePopover";
@@ -25,6 +27,7 @@ interface AllocationDragTimelineProps {
   onEditAllocation?: () => void;
   onSave: (draft: AllocationDragDraft) => void;
   isSaving?: boolean;
+  effortMode?: EffortDisplayMode;
 }
 
 export function AllocationDragTimeline({
@@ -38,6 +41,7 @@ export function AllocationDragTimeline({
   onEditAllocation,
   onSave,
   isSaving = false,
+  effortMode = "hours",
 }: AllocationDragTimelineProps) {
   const trackRef = useRef<HTMLDivElement>(null);
   const [dragRange, setDragRange] = useState<{ start: number; end: number } | null>(null);
@@ -142,7 +146,7 @@ export function AllocationDragTimeline({
             }}
           />
         ) : null}
-        {existingSegment && weeklyCapacityHrs !== undefined && allocationPct !== undefined ? (
+        {existingSegment && weeklyCapacityHrs !== undefined && allocationPct !== undefined && allocation ? (
           <button
             className={existingSegment.className}
             onClick={(event) => {
@@ -155,11 +159,21 @@ export function AllocationDragTimeline({
               background: color,
               borderTopColor: color,
             }}
-            title={formatHoursPerDay(allocationPct, weeklyCapacityHrs)}
+            title={formatAllocationEffort(
+              effortMode,
+              allocationPct,
+              weeklyCapacityHrs,
+              visibleWeekdayCount(dayDates, allocation.start_date, allocation.end_date),
+            )}
             type="button"
           >
             <span className="planner-bar-label">
-              {formatHoursPerDay(allocationPct, weeklyCapacityHrs)}
+              {formatAllocationEffort(
+                effortMode,
+                allocationPct,
+                weeklyCapacityHrs,
+                visibleWeekdayCount(dayDates, allocation.start_date, allocation.end_date),
+              )}
             </span>
           </button>
         ) : null}

frontend/src/components/projects/EffortDisplaySelect.tsx

@@ -0,0 +1,28 @@
+import type { EffortDisplayMode } from "../../planner/allocationTimeline";
+
+interface EffortDisplaySelectProps {
+  value: EffortDisplayMode;
+  onChange: (value: EffortDisplayMode) => void;
+}
+
+const OPTIONS: Array<{ value: EffortDisplayMode; label: string }> = [
+  { value: "days", label: "Days" },
+  { value: "hours", label: "Hours" },
+];
+
+export function EffortDisplaySelect({ value, onChange }: EffortDisplaySelectProps) {
+  return (
+    <select
+      aria-label="Display effort as hours or days"
+      className="effort-display-select"
+      onChange={(event) => onChange(event.target.value as EffortDisplayMode)}
+      value={value}
+    >
+      {OPTIONS.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+}

frontend/src/components/projects/ProjectCalendarTrack.tsx

@@ -23,6 +23,8 @@ interface ProjectCalendarTrackProps {
   project: Project;
   dayDates: Date[];
   showTentative: boolean;
+  /** When false, the row shows milestones only (schedule dates live in the project drawer). */
+  showScheduleSpan?: boolean;
   enableMilestones?: boolean;
   enablePhaseDrag?: boolean;
   onCreateMilestone: (dueDate: string, name: string, note?: string) => void;
@@ -40,6 +42,7 @@ export function ProjectCalendarTrack({
   project,
   dayDates,
   showTentative,
+  showScheduleSpan = false,
   enableMilestones = false,
   enablePhaseDrag = false,
   onCreateMilestone,
@@ -190,7 +193,10 @@ export function ProjectCalendarTrack({
               </div>
             ))
           : null}
-        {lineSegment && mode === "project-line" && (!project.is_tentative || showTentative) ? (
+        {showScheduleSpan &&
+        lineSegment &&
+        mode === "project-line" &&
+        (!project.is_tentative || showTentative) ? (
           <div
             className={`project-span-line${project.is_tentative ? " tentative" : ""}`}
             style={{

frontend/src/components/projects/ProjectPlannerBlock.tsx

@@ -6,11 +6,15 @@ import { AllocationDragTimeline } from "./AllocationDragTimeline";
 import type { AllocationDragDraft } from "./AllocationCreatePopover";
 import { ProjectCalendarTrack } from "./ProjectCalendarTrack";
 import { ProjectRowMenu } from "./ProjectRowMenu";
+import { EffortDisplaySelect } from "./EffortDisplaySelect";
 import {
+  allocatedDaysInRange,
   allocatedHoursInRange,
+  formatDaysAmount,
   formatHoursAmount,
   roundToHalfHour,
   visibleWeekdayCount,
+  type EffortDisplayMode,
 } from "../../planner/allocationTimeline";
 import type { Allocation, Person, Project } from "../../types";
 
@@ -43,6 +47,8 @@ interface ProjectPlannerBlockProps {
   onArchive: () => void;
   isSavingAllocation?: boolean;
   isSavingPlanner?: boolean;
+  effortMode: EffortDisplayMode;
+  onEffortModeChange: (mode: EffortDisplayMode) => void;
   onRestore?: () => void;
 }
 
@@ -68,6 +74,8 @@ export function ProjectPlannerBlock({
   onArchive,
   isSavingAllocation = false,
   isSavingPlanner = false,
+  effortMode,
+  onEffortModeChange,
   onRestore,
 }: ProjectPlannerBlockProps) {
   const showPhasesMilestones = plannerView === "phases_milestones";
@@ -89,30 +97,51 @@ export function ProjectPlannerBlock({
     [dayDates, project.start_date, project.end_date],
   );
 
-  const { allocatedHours, capacityHours, developerCount } = useMemo(() => {
-    let allocated = 0;
+  const { allocatedHours, capacityHours, allocatedDays, capacityDays, developerCount } = useMemo(() => {
+    let allocatedH = 0;
+    let allocatedD = 0;
     const seen = new Set<number>();
     for (const allocation of allocations) {
       const person = peopleById.get(allocation.person_id);
       if (!person) continue;
       seen.add(person.id);
       const days = visibleWeekdayCount(dayDates, allocation.start_date, allocation.end_date);
-      allocated += allocatedHoursInRange(allocation.allocation_pct, person.weekly_capacity_hrs, days);
+      allocatedH += allocatedHoursInRange(allocation.allocation_pct, person.weekly_capacity_hrs, days);
+      allocatedD += allocatedDaysInRange(allocation.allocation_pct, days);
     }
-    const capacity = Array.from(seen).reduce((sum, personId) => {
+    const capacityH = Array.from(seen).reduce((sum, personId) => {
       const person = peopleById.get(personId);
       return sum + (person ? roundToHalfHour(person.weekly_capacity_hrs / 5) * weekdayCount : 0);
     }, 0);
-    return { allocatedHours: allocated, capacityHours: capacity, developerCount: seen.size };
+    const capacityD = seen.size * weekdayCount;
+    return {
+      allocatedHours: allocatedH,
+      capacityHours: capacityH,
+      allocatedDays: allocatedD,
+      capacityDays: capacityD,
+      developerCount: seen.size,
+    };
   }, [allocations, peopleById, dayDates, weekdayCount]);
 
-  const hoursPct = capacityHours > 0 ? Math.min(100, (allocatedHours / capacityHours) * 100) : 0;
-  const hoursLabel =
-    capacityHours > 0
-      ? `${formatHoursAmount(allocatedHours)} / ${formatHoursAmount(capacityHours)}`
-      : developerCount > 0
-        ? `${formatHoursAmount(allocatedHours)} allocated`
-        : "No developers assigned";
+  const effortPct =
+    effortMode === "days"
+      ? capacityDays > 0
+        ? Math.min(100, (allocatedDays / capacityDays) * 100)
+        : 0
+      : capacityHours > 0
+        ? Math.min(100, (allocatedHours / capacityHours) * 100)
+        : 0;
+
+  const effortSummary =
+    developerCount === 0
+      ? "No developers assigned"
+      : effortMode === "days"
+        ? capacityDays > 0
+          ? `${formatDaysAmount(allocatedDays)} / ${formatDaysAmount(capacityDays)}`
+          : `${formatDaysAmount(allocatedDays)} allocated`
+        : capacityHours > 0
+          ? `${formatHoursAmount(allocatedHours)} / ${formatHoursAmount(capacityHours)}`
+          : `${formatHoursAmount(allocatedHours)} allocated`;
 
   const roleGroups = useMemo(() => {
     const map = new Map<string, { roleName: string; allocations: Allocation[] }>();
@@ -209,18 +238,13 @@ export function ProjectPlannerBlock({
           ) : null}
 
           <div className="planner-row planner-project-subrow planner-hours-row">
-            <div className="planner-row-label nested">
-              <span className="planner-sub-icon" aria-hidden>
-                ◷
-              </span>
-              <div className="person-meta">
-                <strong>Hours</strong>
-                <small>{hoursLabel}</small>
-              </div>
+            <div className="planner-row-label nested planner-effort-label">
+              <EffortDisplaySelect onChange={onEffortModeChange} value={effortMode} />
+              <span className={`planner-effort-total${effortPct > 100 ? " is-over" : ""}`}>{effortSummary}</span>
             </div>
             <div className="planner-row-track">
               <div className="planner-hours-track">
-                <div className="planner-hours-bar" style={{ width: `${hoursPct}%` }} />
+                <div className="planner-hours-bar" style={{ width: `${effortPct}%` }} />
               </div>
             </div>
           </div>
@@ -245,6 +269,7 @@ export function ProjectPlannerBlock({
                       candidatePeople={candidatePeople}
                       color={project.color}
                       dayDates={dayDates}
+                      effortMode={effortMode}
                       isSaving={isSavingAllocation}
                       onSave={onCreateAllocation}
                     />
@@ -270,6 +295,7 @@ export function ProjectPlannerBlock({
                         allocationPct={allocation.allocation_pct}
                         color={project.color}
                         dayDates={dayDates}
+                        effortMode={effortMode}
                         fixedPerson={person}
                         isSaving={isSavingAllocation}
                         onEditAllocation={() => onEditAllocation(allocation)}
@@ -294,6 +320,7 @@ export function ProjectPlannerBlock({
                     candidatePeople={candidatePeople}
                     color={project.color}
                     dayDates={dayDates}
+                    effortMode={effortMode}
                     isSaving={isSavingAllocation}
                     onSave={onCreateAllocation}
                   />

frontend/src/pages/Projects.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { addWeeks, format, startOfWeek } from "date-fns";
-import { useCallback, useMemo, useState, type CSSProperties, type FormEvent } from "react";
+import { useCallback, useEffect, useMemo, useState, type CSSProperties, type FormEvent } from "react";
 
 import { createAllocation } from "../api/allocations";
 import {
@@ -21,6 +21,7 @@ import { EmptyState } from "../components/ui/EmptyState";
 import { Modal } from "../components/ui/Modal";
 import { toastFromError, useToast } from "../components/ui/Toast";
 import { useAllocations, usePeople, useProjects, useTeams } from "../hooks/usePortalData";
+import type { EffortDisplayMode } from "../planner/allocationTimeline";
 import { overlapsVisibleRange } from "../planner/projectTimeline";
 import { buildWeekdayRange, isToday, monthMarkersForDays } from "../planner/timeline";
 import type { Allocation, Milestone, Person, Project, ProjectInput } from "../types";
@@ -94,6 +95,14 @@ export function ProjectsPage() {
   const [memberModalProject, setMemberModalProject] = useState<Project | null>(null);
   const [editingAllocation, setEditingAllocation] = useState<Allocation | null>(null);
   const [plannerView, setPlannerView] = useState<PlannerViewMode>("phases_milestones");
+  const [effortMode, setEffortMode] = useState<EffortDisplayMode>(() => {
+    const saved = localStorage.getItem("projects-effort-mode");
+    return saved === "days" ? "days" : "hours";
+  });
+
+  useEffect(() => {
+    localStorage.setItem("projects-effort-mode", effortMode);
+  }, [effortMode]);
 
   const rangeWeeks = RANGE_OPTIONS.find((option) => option.value === range)?.weeks ?? 5;
   const startDate = anchor;
@@ -528,8 +537,10 @@ export function ProjectsPage() {
                           <ProjectPlannerBlock
                             allocations={projectAllocations}
                             dayDates={plannerDays}
+                            effortMode={effortMode}
                             expanded={expanded}
                             isSavingAllocation={createAllocationMutation.isPending}
+                            onEffortModeChange={setEffortMode}
                             isSavingPlanner={plannerSaveMutation.isPending}
                             key={project.id}
                             onAddPerson={() => {

frontend/src/planner/allocationTimeline.ts

@@ -76,6 +76,30 @@ export function formatHoursPerDay(allocationPct: number, weeklyCapacityHrs: numb
   return `${formatHoursAmount(daily)}/day`;
 }
 
+export type EffortDisplayMode = "hours" | "days";
+
+export function formatDaysAmount(days: number): string {
+  return `${Math.round(days)}d`;
+}
+
+export function allocatedDaysInRange(allocationPct: number, weekdayCount: number): number {
+  if (weekdayCount <= 0) return 0;
+  return Math.round((weekdayCount * allocationPct) / 100);
+}
+
+export function formatAllocationEffort(
+  mode: EffortDisplayMode,
+  allocationPct: number,
+  weeklyCapacityHrs: number,
+  weekdayCount: number,
+): string {
+  if (mode === "days") {
+    const days = allocatedDaysInRange(allocationPct, weekdayCount);
+    return days > 0 ? formatDaysAmount(days) : "0d";
+  }
+  return formatHoursPerDay(allocationPct, weeklyCapacityHrs);
+}
+
 export function visibleWeekdayCount(dayDates: Date[], startDate: string, endDate: string): number {
   return dayDates.filter((day) => {
     const key = format(day, "yyyy-MM-dd");

frontend/src/styles.css

@@ -2202,6 +2202,36 @@ th {
   width: 18px;
 }
 
+.planner-effort-label {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+}
+
+.effort-display-select {
+  background: #fff;
+  border: 2px solid #2563eb;
+  border-radius: 8px;
+  color: #1e40af;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 700;
+  min-width: 72px;
+  padding: 4px 8px;
+}
+
+.planner-effort-total {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  margin-left: auto;
+}
+
+.planner-effort-total.is-over {
+  color: #dc2626;
+}
+
 .planner-hours-track {
   align-self: center;
   background: #ece9f5;