Align Projects planner with Runn: thin timeline, phases, and row menus.

Adds project phases API, milestone/phase popovers on calendar click, per-project kebab menu with end chevron, Phases & Milestones view, and New Project only at the list bottom.

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

backend/alembic/versions/0005_project_phases.py

@@ -0,0 +1,34 @@
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy import inspect
+
+revision = "0005_project_phases"
+down_revision = "0004_drop_project_client_pricing"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    bind = op.get_bind()
+    if "project_phases" in inspect(bind).get_table_names():
+        return
+    op.create_table(
+        "project_phases",
+        sa.Column("id", sa.Integer(), primary_key=True),
+        sa.Column("project_id", sa.Integer(), sa.ForeignKey("projects.id"), nullable=False),
+        sa.Column("name", sa.String(), nullable=False),
+        sa.Column("start_date", sa.Date(), nullable=False),
+        sa.Column("end_date", sa.Date(), nullable=False),
+        sa.Column("color", sa.String(), nullable=False, server_default="#14b8a6"),
+    )
+    op.create_index("ix_project_phases_id", "project_phases", ["id"])
+    op.create_index("ix_project_phases_project_id", "project_phases", ["project_id"])
+
+
+def downgrade() -> None:
+    bind = op.get_bind()
+    if "project_phases" not in inspect(bind).get_table_names():
+        return
+    op.drop_index("ix_project_phases_project_id", table_name="project_phases")
+    op.drop_index("ix_project_phases_id", table_name="project_phases")
+    op.drop_table("project_phases")

backend/models.py

@@ -139,10 +139,24 @@ class Project(Base):
     owner: Mapped[Person | None] = relationship(back_populates="owned_projects")
     team: Mapped["Team | None"] = relationship()
     milestones: Mapped[list["Milestone"]] = relationship(back_populates="project", cascade="all, delete-orphan")
+    phases: Mapped[list["ProjectPhase"]] = relationship(back_populates="project", cascade="all, delete-orphan")
     allocations: Mapped[list["Allocation"]] = relationship(back_populates="project")
     tags: Mapped[list[Tag]] = relationship(secondary=project_tags, lazy="selectin")
 
 
+class ProjectPhase(Base):
+    __tablename__ = "project_phases"
+
+    id: Mapped[int] = mapped_column(Integer, primary_key=True, index=True)
+    project_id: Mapped[int] = mapped_column(ForeignKey("projects.id"), nullable=False)
+    name: Mapped[str] = mapped_column(String, nullable=False)
+    start_date: Mapped[date] = mapped_column(Date, nullable=False)
+    end_date: Mapped[date] = mapped_column(Date, nullable=False)
+    color: Mapped[str] = mapped_column(String, default="#14b8a6", nullable=False)
+
+    project: Mapped[Project] = relationship(back_populates="phases")
+
+
 class Milestone(Base):
     __tablename__ = "milestones"
 

backend/routers/projects.py

@@ -4,8 +4,17 @@ from sqlalchemy.orm import Session, selectinload
 
 from auth import get_current_user, require_manager
 from database import get_db
-from models import Milestone, Project, Tag
-from schemas import MilestoneCreate, MilestoneRead, MilestoneUpdate, ProjectCreate, ProjectRead, ProjectUpdate
+from models import Milestone, Project, ProjectPhase, Tag
+from schemas import (
+    MilestoneCreate,
+    MilestoneRead,
+    MilestoneUpdate,
+    ProjectCreate,
+    ProjectPhaseCreate,
+    ProjectPhaseRead,
+    ProjectRead,
+    ProjectUpdate,
+)
 
 router = APIRouter(dependencies=[Depends(get_current_user)])
 
@@ -33,7 +42,10 @@ def list_projects(
     include_archived: bool = False,
     db: Session = Depends(get_db),
 ) -> list[Project]:
-    query = select(Project).options(selectinload(Project.milestones))
+    query = select(Project).options(
+        selectinload(Project.milestones),
+        selectinload(Project.phases),
+    )
     if not include_archived:
         query = query.where(Project.is_active.is_(True))
     if status:
@@ -120,3 +132,32 @@ def update_milestone(
     db.commit()
     db.refresh(milestone)
     return milestone
+
+
+@router.post(
+    "/projects/{project_id}/phases",
+    response_model=ProjectPhaseRead,
+    dependencies=[Depends(require_manager)],
+)
+def create_phase(project_id: int, payload: ProjectPhaseCreate, db: Session = Depends(get_db)) -> ProjectPhase:
+    _project_or_404(db, project_id)
+    if payload.start_date > payload.end_date:
+        raise HTTPException(status_code=400, detail="Phase start date must be before end date")
+    phase = ProjectPhase(project_id=project_id, **payload.model_dump())
+    db.add(phase)
+    db.commit()
+    db.refresh(phase)
+    return phase
+
+
+@router.delete(
+    "/projects/{project_id}/phases/{phase_id}",
+    dependencies=[Depends(require_manager)],
+)
+def delete_phase(project_id: int, phase_id: int, db: Session = Depends(get_db)) -> dict:
+    phase = db.get(ProjectPhase, phase_id)
+    if not phase or phase.project_id != project_id:
+        raise HTTPException(status_code=404, detail="Phase not found")
+    db.delete(phase)
+    db.commit()
+    return {"deleted": True}

backend/schemas.py

@@ -167,6 +167,24 @@ class MilestoneRead(MilestoneBase):
     project_id: int
 
 
+class ProjectPhaseBase(BaseModel):
+    name: str
+    start_date: date
+    end_date: date
+    color: str = "#14b8a6"
+
+
+class ProjectPhaseCreate(ProjectPhaseBase):
+    pass
+
+
+class ProjectPhaseRead(ProjectPhaseBase):
+    model_config = ConfigDict(from_attributes=True)
+
+    id: int
+    project_id: int
+
+
 class ProjectBase(BaseModel):
     name: str
     description: str | None = None
@@ -205,6 +223,7 @@ class ProjectRead(ProjectBase):
     is_active: bool
     created_at: datetime
     milestones: list[MilestoneRead] = []
+    phases: list[ProjectPhaseRead] = []
     tags: list[TagRead] = []
 
 

frontend/src/api/projects.ts

@@ -1,5 +1,5 @@
 import { api } from "./client";
-import type { Milestone, MilestoneInput, Project, ProjectInput } from "../types";
+import type { Milestone, MilestoneInput, Project, ProjectInput, ProjectPhase } from "../types";
 
 export const listProjects = async (includeArchived = false) =>
   (
@@ -29,3 +29,8 @@ export const updateMilestone = async (
   input: Partial<MilestoneInput>,
 ) =>
   (await api.patch<Milestone>(`/projects/${projectId}/milestones/${milestoneId}`, input)).data;
+
+export const createPhase = async (
+  projectId: number,
+  input: { name: string; start_date: string; end_date: string; color?: string },
+) => (await api.post<ProjectPhase>(`/projects/${projectId}/phases`, input)).data;

frontend/src/components/projects/ProjectCalendarTrack.tsx

@@ -0,0 +1,349 @@
+import { format, parseISO } from "date-fns";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import {
+  buildAllocationBarSegment,
+  dateStringsFromDayIndices,
+  dayIndexFromPointer,
+  projectBarStyle,
+} from "../../planner/allocationTimeline";
+import type { Milestone, Project, ProjectPhase } from "../../types";
+
+type TrackMode = "project-line" | "phases";
+
+interface ProjectCalendarTrackProps {
+  mode: TrackMode;
+  project: Project;
+  dayDates: Date[];
+  showTentative: boolean;
+  enableMilestones?: boolean;
+  enablePhaseDrag?: boolean;
+  onCreateMilestone: (dueDate: string, name: string, note?: string) => void;
+  onCreatePhase: (input: { name: string; start_date: string; end_date: string }) => void;
+  isSaving?: boolean;
+}
+
+export function ProjectCalendarTrack({
+  mode,
+  project,
+  dayDates,
+  showTentative,
+  enableMilestones = false,
+  enablePhaseDrag = false,
+  onCreateMilestone,
+  onCreatePhase,
+  isSaving = false,
+}: ProjectCalendarTrackProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [dragRange, setDragRange] = useState<{ start: number; end: number } | null>(null);
+  const [popover, setPopover] = useState<
+    | { type: "milestone"; dueDate: string; anchor: { top: number; left: number } }
+    | { type: "phase"; startDate: string; endDate: string; anchor: { top: number; left: number } }
+    | null
+  >(null);
+  const [milestoneName, setMilestoneName] = useState("");
+  const [milestoneNote, setMilestoneNote] = useState("");
+  const [phaseName, setPhaseName] = useState("Phase");
+
+  const totalDays = dayDates.length;
+  const lineSegment =
+    mode === "project-line"
+      ? buildAllocationBarSegment(dayDates, project.start_date, project.end_date)
+      : null;
+
+  const previewSegment =
+    dragRange && totalDays > 0
+      ? {
+          startIndex: Math.min(dragRange.start, dragRange.end),
+          endIndex: Math.max(dragRange.start, dragRange.end),
+        }
+      : null;
+
+  const openMilestoneAt = (index: number, clientX: number, clientY: number) => {
+    const dueDate = format(dayDates[index], "yyyy-MM-dd");
+    setMilestoneName("");
+    setMilestoneNote("");
+    setPopover({ type: "milestone", dueDate, anchor: { top: clientY + 8, left: clientX - 120 } });
+  };
+
+  const finishDrag = useCallback(
+    (clientX: number, clientY: number) => {
+      if (!dragRange) return;
+      const { start_date, end_date } = dateStringsFromDayIndices(dayDates, dragRange.start, dragRange.end);
+      setDragRange(null);
+      setPhaseName("Phase");
+      setPopover({
+        type: "phase",
+        startDate: start_date,
+        endDate: end_date,
+        anchor: { top: clientY + 8, left: clientX - 120 },
+      });
+    },
+    [dragRange, dayDates],
+  );
+
+  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!trackRef.current || event.button !== 0) return;
+    if ((event.target as HTMLElement).closest(".milestone-pin, .phase-bar")) return;
+    const index = dayIndexFromPointer(event.clientX, trackRef.current.getBoundingClientRect(), totalDays);
+
+    if (enablePhaseDrag) {
+      setDragRange({ start: index, end: index });
+      trackRef.current.setPointerCapture(event.pointerId);
+      return;
+    }
+
+    if (enableMilestones && mode === "project-line" && !dragRange) {
+      openMilestoneAt(index, event.clientX, event.clientY);
+    }
+  };
+
+  const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!dragRange || !trackRef.current) return;
+    const index = dayIndexFromPointer(event.clientX, trackRef.current.getBoundingClientRect(), totalDays);
+    setDragRange((prev) => (prev ? { ...prev, end: index } : null));
+  };
+
+  const onPointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (!trackRef.current?.hasPointerCapture(event.pointerId)) return;
+    trackRef.current.releasePointerCapture(event.pointerId);
+    if (dragRange) finishDrag(event.clientX, event.clientY);
+  };
+
+  const phases = project.phases ?? [];
+  const milestones = project.milestones ?? [];
+
+  return (
+    <>
+      <div
+        className={`planner-timeline planner-calendar-track planner-calendar-${mode}${dragRange ? " is-dragging" : ""}`}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        ref={trackRef}
+      >
+        <div className="planner-day-grid" />
+        {lineSegment && mode === "project-line" && (!project.is_tentative || showTentative) ? (
+          <div
+            className={`project-span-line${project.is_tentative ? " tentative" : ""}`}
+            style={{
+              ...projectBarStyle(
+                {
+                  startIndex: lineSegment.startIndex,
+                  endIndex: lineSegment.endIndex,
+                  className: "project-span-line",
+                  label: "",
+                },
+                totalDays,
+              ),
+              background: project.color,
+            }}
+            title={project.name}
+          />
+        ) : null}
+
+        {mode === "phases"
+          ? phases.map((phase) => (
+              <PhaseBar key={phase.id} dayDates={dayDates} phase={phase} totalDays={totalDays} />
+            ))
+          : null}
+
+        {previewSegment && enablePhaseDrag ? (
+          <div
+            className="phase-bar preview"
+            style={{
+              ...projectBarStyle(
+                {
+                  startIndex: previewSegment.startIndex,
+                  endIndex: previewSegment.endIndex,
+                  className: "phase-bar",
+                  label: phaseName,
+                },
+                totalDays,
+              ),
+            }}
+          >
+            {phaseName}
+          </div>
+        ) : null}
+
+        {enableMilestones && mode === "project-line"
+          ? milestones.map((milestone) => (
+              <MilestonePin dayDates={dayDates} key={milestone.id} milestone={milestone} totalDays={totalDays} />
+            ))
+          : null}
+      </div>
+
+      {popover?.type === "milestone"
+        ? createPortal(
+            <QuickPopover
+              anchor={popover.anchor}
+              onCancel={() => setPopover(null)}
+              title={`Add milestone · ${format(parseISO(popover.dueDate), "d MMM yyyy")}`}
+            >
+              <label>
+                Name
+                <input
+                  autoFocus
+                  onChange={(event) => setMilestoneName(event.target.value)}
+                  placeholder="Milestone name"
+                  type="text"
+                  value={milestoneName}
+                />
+              </label>
+              <label>
+                Note <small>(optional)</small>
+                <textarea
+                  onChange={(event) => setMilestoneNote(event.target.value)}
+                  rows={2}
+                  value={milestoneNote}
+                />
+              </label>
+              <div className="quick-popover-actions">
+                <button className="secondary-button" onClick={() => setPopover(null)} type="button">
+                  Cancel
+                </button>
+                <button
+                  className="primary-button"
+                  disabled={isSaving || !milestoneName.trim()}
+                  onClick={() => {
+                    onCreateMilestone(popover.dueDate, milestoneName.trim(), milestoneNote.trim() || undefined);
+                    setPopover(null);
+                  }}
+                  type="button"
+                >
+                  Create
+                </button>
+              </div>
+            </QuickPopover>,
+            document.body,
+          )
+        : null}
+
+      {popover?.type === "phase"
+        ? createPortal(
+            <QuickPopover anchor={popover.anchor} onCancel={() => setPopover(null)} title="Add phase">
+              <label>
+                Phase name
+                <input
+                  autoFocus
+                  onChange={(event) => setPhaseName(event.target.value)}
+                  type="text"
+                  value={phaseName}
+                />
+              </label>
+              <p className="muted-text" style={{ margin: 0, fontSize: 12 }}>
+                {format(parseISO(popover.startDate), "d MMM")} – {format(parseISO(popover.endDate), "d MMM yyyy")}
+              </p>
+              <div className="quick-popover-actions">
+                <button className="secondary-button" onClick={() => setPopover(null)} type="button">
+                  Cancel
+                </button>
+                <button
+                  className="primary-button"
+                  disabled={isSaving || !phaseName.trim()}
+                  onClick={() => {
+                    onCreatePhase({
+                      name: phaseName.trim(),
+                      start_date: popover.startDate,
+                      end_date: popover.endDate,
+                    });
+                    setPopover(null);
+                  }}
+                  type="button"
+                >
+                  Save
+                </button>
+              </div>
+            </QuickPopover>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}
+
+function PhaseBar({
+  phase,
+  dayDates,
+  totalDays,
+}: {
+  phase: ProjectPhase;
+  dayDates: Date[];
+  totalDays: number;
+}) {
+  const segment = buildAllocationBarSegment(dayDates, phase.start_date, phase.end_date);
+  if (!segment) return null;
+  return (
+    <div
+      className="phase-bar"
+      style={{
+        ...projectBarStyle(segment, totalDays),
+        background: phase.color,
+      }}
+      title={phase.name}
+    >
+      {phase.name}
+    </div>
+  );
+}
+
+function MilestonePin({
+  milestone,
+  dayDates,
+  totalDays,
+}: {
+  milestone: Milestone;
+  dayDates: Date[];
+  totalDays: number;
+}) {
+  const index = dayDates.findIndex((day) => format(day, "yyyy-MM-dd") === milestone.due_date);
+  if (index < 0) return null;
+  const left = ((index + 0.5) / totalDays) * 100;
+  return (
+    <span
+      className={`milestone-pin${milestone.is_completed ? " completed" : ""}`}
+      style={{ left: `${left}%` }}
+      title={`${milestone.name} · ${milestone.due_date}`}
+    />
+  );
+}
+
+function QuickPopover({
+  anchor,
+  title,
+  children,
+  onCancel,
+}: {
+  anchor: { top: number; left: number };
+  title: string;
+  children: ReactNode;
+  onCancel: () => void;
+}) {
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onCancel();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+
+  return (
+    <div
+      className="allocation-drag-popover quick-popover"
+      style={{
+        top: Math.min(anchor.top, window.innerHeight - 280),
+        left: Math.min(Math.max(8, anchor.left), window.innerWidth - 280),
+      }}
+    >
+      <div className="allocation-drag-popover-header">
+        <strong>{title}</strong>
+        <button aria-label="Close" className="icon-button" onClick={onCancel} type="button">
+          ✕
+        </button>
+      </div>
+      <div className="allocation-drag-popover-body quick-popover-body">{children}</div>
+    </div>
+  );
+}

frontend/src/components/projects/ProjectPlannerBlock.tsx

@@ -1,9 +1,11 @@
+import { ChevronRight } from "lucide-react";
 import { useMemo } from "react";
 
 import { Avatar } from "../ui/Avatar";
 import { AllocationDragTimeline } from "./AllocationDragTimeline";
 import type { AllocationDragDraft } from "./AllocationCreatePopover";
-import { ProjectTimelineRow } from "../planner/ProjectTimelineRow";
+import { ProjectCalendarTrack } from "./ProjectCalendarTrack";
+import { ProjectRowMenu } from "./ProjectRowMenu";
 import {
   allocatedHoursInRange,
   formatHoursAmount,
@@ -12,10 +14,13 @@ import {
 } from "../../planner/allocationTimeline";
 import type { Allocation, Person, Project } from "../../types";
 
+export type PlannerViewMode = "timeline" | "phases_milestones";
+
 interface ProjectPlannerBlockProps {
   project: Project;
   teamLabel: string;
   dayDates: Date[];
+  plannerView: PlannerViewMode;
   showTentative: boolean;
   expanded: boolean;
   allocations: Allocation[];
@@ -26,7 +31,13 @@ interface ProjectPlannerBlockProps {
   onAddPerson: () => void;
   onEditAllocation: (allocation: Allocation) => void;
   onCreateAllocation: (draft: AllocationDragDraft) => void;
+  onCreateMilestone: (dueDate: string, name: string, note?: string) => void;
+  onCreatePhase: (input: { name: string; start_date: string; end_date: string }) => void;
+  onToggleTentative: () => void;
+  onMilestones: () => void;
+  onArchive: () => void;
   isSavingAllocation?: boolean;
+  isSavingPlanner?: boolean;
   onRestore?: () => void;
 }
 
@@ -34,6 +45,7 @@ export function ProjectPlannerBlock({
   project,
   teamLabel,
   dayDates,
+  plannerView,
   showTentative,
   expanded,
   allocations,
@@ -44,9 +56,16 @@ export function ProjectPlannerBlock({
   onAddPerson,
   onEditAllocation,
   onCreateAllocation,
+  onCreateMilestone,
+  onCreatePhase,
+  onToggleTentative,
+  onMilestones,
+  onArchive,
   isSavingAllocation = false,
+  isSavingPlanner = false,
   onRestore,
 }: ProjectPlannerBlockProps) {
+  const showPhasesMilestones = plannerView === "phases_milestones";
   const assignedPersonIds = useMemo(
     () => [...new Set(allocations.map((item) => item.person_id))],
     [allocations],
@@ -59,6 +78,7 @@ export function ProjectPlannerBlock({
       : active;
     return teamFiltered.filter((person) => !assignedPersonIds.includes(person.id));
   }, [people, project.team_id, assignedPersonIds]);
+
   const weekdayCount = useMemo(
     () => visibleWeekdayCount(dayDates, project.start_date, project.end_date),
     [dayDates, project.start_date, project.end_date],
@@ -105,18 +125,6 @@ export function ProjectPlannerBlock({
     <div className={`planner-project-block ${expanded ? "is-expanded" : ""}`}>
       <div className={`planner-row planner-project-row ${project.is_active ? "" : "planner-row-archived"}`}>
         <div className="planner-row-label person planner-project-label">
-          <button
-            aria-expanded={expanded}
-            aria-label={expanded ? "Collapse project" : "Expand project"}
-            className="planner-expand-button"
-            onClick={(event) => {
-              event.stopPropagation();
-              onToggleExpand();
-            }}
-            type="button"
-          >
-            <span className="caret">{expanded ? "▾" : "▸"}</span>
-          </button>
           <button className="planner-project-name" onClick={onEditProject} type="button">
             <span className="project-swatch" style={{ background: project.color }} />
             <div className="person-meta">
@@ -136,35 +144,65 @@ export function ProjectPlannerBlock({
               <small>{teamLabel}</small>
             </div>
           </button>
-          {!project.is_active && onRestore ? (
+          <div className="planner-project-actions">
+            <ProjectRowMenu
+              onArchive={onArchive}
+              onEditDetails={onEditProject}
+              onMilestones={onMilestones}
+              onRestore={onRestore}
+              onToggleTentative={onToggleTentative}
+              project={project}
+            />
             <button
-              className="ghost-button"
-              onClick={(event) => {
-                event.stopPropagation();
-                onRestore();
-              }}
+              aria-expanded={expanded}
+              aria-label={expanded ? "Collapse project" : "Expand project"}
+              className={`planner-expand-end${expanded ? " expanded" : ""}`}
+              onClick={onToggleExpand}
               type="button"
             >
-              Restore
+              <ChevronRight size={18} />
             </button>
-          ) : null}
+          </div>
         </div>
         <div className="planner-row-track">
-          <ProjectTimelineRow
-            color={project.color}
+          <ProjectCalendarTrack
             dayDates={dayDates}
-            endDate={project.end_date}
-            name={project.name}
-            onClick={onEditProject}
+            enableMilestones
+            isSaving={isSavingPlanner}
+            mode="project-line"
+            onCreateMilestone={onCreateMilestone}
+            onCreatePhase={onCreatePhase}
+            project={project}
             showTentative={showTentative}
-            startDate={project.start_date}
-            tentative={project.is_tentative}
           />
         </div>
       </div>
 
       {expanded ? (
         <>
+          {showPhasesMilestones ? (
+            <div className="planner-row planner-project-subrow planner-phases-row">
+              <div className="planner-row-label nested">
+                <span className="planner-sub-icon" aria-hidden>
+                  ◆
+                </span>
+                <strong>Phases</strong>
+              </div>
+              <div className="planner-row-track">
+                <ProjectCalendarTrack
+                  dayDates={dayDates}
+                  enablePhaseDrag
+                  isSaving={isSavingPlanner}
+                  mode="phases"
+                  onCreateMilestone={onCreateMilestone}
+                  onCreatePhase={onCreatePhase}
+                  project={project}
+                  showTentative={showTentative}
+                />
+              </div>
+            </div>
+          ) : null}
+
           <div className="planner-row planner-project-subrow planner-hours-row">
             <div className="planner-row-label nested">
               <span className="planner-sub-icon" aria-hidden>

frontend/src/components/projects/ProjectRowMenu.tsx

@@ -0,0 +1,42 @@
+import { Archive, Copy, Flag, Pencil, Star } from "lucide-react";
+
+import { RowMenu, type RowMenuItem } from "../../pages/manage/_shared";
+import type { Project } from "../../types";
+
+interface ProjectRowMenuProps {
+  project: Project;
+  onEditDetails: () => void;
+  onMilestones: () => void;
+  onToggleTentative: () => void;
+  onArchive: () => void;
+  onRestore?: () => void;
+}
+
+export function ProjectRowMenu({
+  project,
+  onEditDetails,
+  onMilestones,
+  onToggleTentative,
+  onArchive,
+  onRestore,
+}: ProjectRowMenuProps) {
+  const items: RowMenuItem[] = [
+    { label: "Edit Details", icon: Pencil, onClick: onEditDetails },
+    { label: "Milestones", icon: Flag, onClick: onMilestones },
+    {
+      label: project.is_tentative ? "Set Confirmed" : "Set Tentative",
+      icon: Star,
+      onClick: onToggleTentative,
+    },
+    {
+      label: "Duplicate",
+      icon: Copy,
+      onClick: () => window.alert("Duplicate is not available yet."),
+    },
+    project.is_active
+      ? { label: "Archive", icon: Archive, danger: true, onClick: onArchive }
+      : { label: "Restore", icon: Archive, onClick: onRestore ?? (() => undefined) },
+  ];
+
+  return <RowMenu items={items} />;
+}

frontend/src/pages/Projects.tsx

@@ -6,6 +6,7 @@ import { createAllocation } from "../api/allocations";
 import {
   archiveProject,
   createMilestone,
+  createPhase,
   createProject,
   restoreProject,
   updateMilestone,
@@ -15,7 +16,7 @@ import type { AllocationDragDraft } from "../components/projects/AllocationCreat
 import { SelectorDropdown, Toggle } from "../components/planner/PlannerControls";
 import { AddProjectMemberModal } from "../components/projects/AddProjectMemberModal";
 import { ProjectDrawer } from "../components/projects/ProjectDrawer";
-import { ProjectPlannerBlock } from "../components/projects/ProjectPlannerBlock";
+import { ProjectPlannerBlock, type PlannerViewMode } from "../components/projects/ProjectPlannerBlock";
 import { EmptyState } from "../components/ui/EmptyState";
 import { Modal } from "../components/ui/Modal";
 import { toastFromError, useToast } from "../components/ui/Toast";
@@ -92,6 +93,7 @@ export function ProjectsPage() {
   const [expandedProjectIds, setExpandedProjectIds] = useState<Set<number>>(new Set());
   const [memberModalProject, setMemberModalProject] = useState<Project | null>(null);
   const [editingAllocation, setEditingAllocation] = useState<Allocation | null>(null);
+  const [plannerView, setPlannerView] = useState<PlannerViewMode>("phases_milestones");
 
   const rangeWeeks = RANGE_OPTIONS.find((option) => option.value === range)?.weeks ?? 5;
   const startDate = anchor;
@@ -228,6 +230,45 @@ export function ProjectsPage() {
     });
   };
 
+  const plannerSaveMutation = useMutation({
+    mutationFn: async ({
+      projectId,
+      kind,
+      payload,
+    }: {
+      projectId: number;
+      kind: "milestone" | "phase";
+      payload: Record<string, string>;
+    }) => {
+      if (kind === "milestone") {
+        return createMilestone(projectId, {
+          name: payload.name,
+          due_date: payload.due_date,
+        });
+      }
+      return createPhase(projectId, {
+        name: payload.name,
+        start_date: payload.start_date,
+        end_date: payload.end_date,
+      });
+    },
+    onSuccess: () => {
+      invalidate();
+      push("Saved", "success");
+    },
+    onError: (error) => push(toastFromError(error, "Could not save"), "error"),
+  });
+
+  const toggleTentativeMutation = useMutation({
+    mutationFn: ({ id, is_tentative }: { id: number; is_tentative: boolean }) =>
+      updateProject(id, { is_tentative }),
+    onSuccess: () => {
+      invalidate();
+      push("Project updated", "success");
+    },
+    onError: (error) => push(toastFromError(error, "Could not update project"), "error"),
+  });
+
   const openCreate = () => {
     setEditingId(null);
     setForm({ ...emptyForm, color: PROJECT_COLORS[Math.floor(Math.random() * PROJECT_COLORS.length)] });
@@ -303,9 +344,12 @@ export function ProjectsPage() {
         <div className="planner-controls-row">
           <div className="planner-controls-left">
             <SelectorDropdown
-              value="timeline"
-              options={[{ value: "timeline", label: "Project Timeline" }]}
-              onChange={() => undefined}
+              value={plannerView}
+              options={[
+                { value: "phases_milestones", label: "Phases & Milestones" },
+                { value: "timeline", label: "Project Timeline" },
+              ]}
+              onChange={(value) => setPlannerView(value as PlannerViewMode)}
             />
             <SelectorDropdown
               value={groupBy}
@@ -410,10 +454,7 @@ export function ProjectsPage() {
         <article className="planner">
           <div className="planner-sync" style={plannerColsStyle}>
             <div className="planner-grid-header">
-              <div className="planner-sidebar-head">
-                <button className="primary-button add-button" onClick={openCreate} type="button">
-                  <span className="plus">+</span> New
-                </button>
+              <div className="planner-sidebar-head planner-sidebar-head-count">
                 <span className="planner-stat">
                   <span className="dot" /> {sorted.length} {sorted.length === 1 ? "Project" : "Projects"}
                 </span>
@@ -468,19 +509,39 @@ export function ProjectsPage() {
                             allocations={projectAllocations}
                             dayDates={plannerDays}
                             expanded={expanded}
+                            isSavingAllocation={createAllocationMutation.isPending}
+                            isSavingPlanner={plannerSaveMutation.isPending}
                             key={project.id}
                             onAddPerson={() => {
                               setEditingAllocation(null);
                               setMemberModalProject(project);
                             }}
+                            onArchive={() => {
+                              if (window.confirm(`Archive ${project.name}?`)) {
+                                archiveMutation.mutate(project.id);
+                              }
+                            }}
                             onCreateAllocation={(draft) => handleCreateAllocation(project.id, draft)}
+                            onCreateMilestone={(dueDate, name) => {
+                              plannerSaveMutation.mutate({
+                                projectId: project.id,
+                                kind: "milestone",
+                                payload: { name, due_date: dueDate },
+                              });
+                            }}
+                            onCreatePhase={(input) => {
+                              plannerSaveMutation.mutate({
+                                projectId: project.id,
+                                kind: "phase",
+                                payload: input,
+                              });
+                            }}
                             onEditAllocation={(allocation) => {
                               setEditingAllocation(allocation);
                               setMemberModalProject(project);
                             }}
                             onEditProject={() => openEdit(project)}
-                            isSavingAllocation={createAllocationMutation.isPending}
-                            people={people}
+                            onMilestones={() => setMilestoneProject(project)}
                             onRestore={
                               !project.is_active
                                 ? () => restoreMutation.mutate(project.id)
@@ -494,7 +555,15 @@ export function ProjectsPage() {
                                 return next;
                               });
                             }}
+                            onToggleTentative={() =>
+                              toggleTentativeMutation.mutate({
+                                id: project.id,
+                                is_tentative: !project.is_tentative,
+                              })
+                            }
+                            people={people}
                             peopleById={peopleById}
+                            plannerView={plannerView}
                             project={project}
                             showTentative={showTentative}
                             teamLabel={teamLabel}
@@ -505,11 +574,11 @@ export function ProjectsPage() {
               );
             })}
 
-            <div className="planner-row planner-add-row" onClick={openCreate} role="button" tabIndex={0}>
-              <div className="planner-row-label add">
+            <div className="planner-row planner-new-project-row">
+              <button className="planner-new-project-button" onClick={openCreate} type="button">
                 <span className="plus">+</span> New Project
-              </div>
-              <div className="planner-row-track muted-text">Add another project to the timeline</div>
+              </button>
+              <div className="planner-row-track" />
             </div>
           </div>
         </article>

frontend/src/styles.css

@@ -1275,15 +1275,34 @@ th {
   margin-right: 8px;
 }
 
-.planner-add-row {
+.planner-new-project-row {
   background: #fbfaff;
+  border-top: 1px solid var(--line);
+}
+
+.planner-new-project-button {
+  align-items: center;
+  background: white;
+  border: 1px solid var(--primary);
+  border-radius: 999px;
+  color: var(--primary);
   cursor: pointer;
+  display: inline-flex;
+  font-weight: 700;
+  gap: 8px;
+  margin: 12px 14px;
+  padding: 8px 18px;
 }
 
-.planner-add-row:hover {
+.planner-new-project-button:hover {
   background: var(--primary-soft);
 }
 
+.planner-new-project-button .plus {
+  font-size: 16px;
+  line-height: 1;
+}
+
 .planner-add-row .planner-row-grid {
   align-items: center;
   display: flex;
@@ -1889,20 +1908,47 @@ th {
   min-height: 52px;
 }
 
+.planner-sidebar-head-count {
+  justify-content: flex-start;
+  padding: 12px 14px;
+}
+
 .planner-project-label {
   align-items: center;
   display: flex;
-  gap: 6px;
-  padding: 8px 10px 8px 6px;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 8px 10px 8px 12px;
+}
+
+.planner-project-actions {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: 2px;
 }
 
-.planner-expand-button {
+.planner-expand-end {
+  align-items: center;
   background: none;
   border: none;
   color: var(--muted);
   cursor: pointer;
-  flex-shrink: 0;
-  padding: 4px;
+  display: inline-flex;
+  height: 32px;
+  justify-content: center;
+  transition: transform 0.15s ease;
+  width: 32px;
+}
+
+.planner-expand-end.expanded {
+  transform: rotate(90deg);
+}
+
+.planner-expand-end:hover {
+  background: var(--primary-soft);
+  border-radius: 6px;
+  color: var(--primary);
 }
 
 .planner-project-name {
@@ -2055,6 +2101,94 @@ th {
   padding: 12px 14px;
 }
 
+.planner-calendar-track {
+  cursor: crosshair;
+  min-height: 36px;
+}
+
+.planner-calendar-project-line {
+  min-height: 28px;
+}
+
+.project-span-line {
+  border-radius: 2px;
+  box-sizing: border-box;
+  height: 4px;
+  min-width: 8px;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+.project-span-line.tentative {
+  opacity: 0.45;
+}
+
+.phase-bar {
+  align-items: center;
+  border-radius: 6px;
+  box-sizing: border-box;
+  color: #0f766e;
+  display: flex;
+  font-size: 11px;
+  font-weight: 700;
+  height: calc(100% - 10px);
+  justify-content: flex-start;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0 8px;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 5px;
+  white-space: nowrap;
+  z-index: 3;
+}
+
+.phase-bar.preview {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.milestone-pin {
+  background: #f59e0b;
+  border: 2px solid white;
+  border-radius: 2px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  height: 14px;
+  margin-left: -7px;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  width: 14px;
+  z-index: 4;
+}
+
+.milestone-pin.completed {
+  background: var(--success);
+}
+
+.quick-popover-body {
+  gap: 10px;
+}
+
+.quick-popover-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+
+.planner-phases-row .planner-row-track {
+  min-height: 40px;
+}
+
+.planner-project-row .planner-row-track {
+  min-height: 32px;
+}
+
 .project-bar.allocation-bar {
   border: none;
   font-family: inherit;

frontend/src/types/index.ts

@@ -75,6 +75,16 @@ export interface Project {
   owner_id?: number | null;
   team_id?: number | null;
   milestones: Milestone[];
+  phases?: ProjectPhase[];
+}
+
+export interface ProjectPhase {
+  id: number;
+  project_id: number;
+  name: string;
+  start_date: string;
+  end_date: string;
+  color: string;
 }
 
 export interface ProjectInput {