feat: AI assistant (HartBOT), demand filling, budget-per-role, project favorites, and UX improvements

AI Assistant (HartBOT):
- Chat panel with inline layout, session persistence, message history (up-arrow recall)
- OpenAI function calling with 20+ tools (search, navigate, create/cancel allocations, update status)
- RBAC-aware tool filtering, fuzzy search with word-level matching
- Navigation actions (router.push) and data invalidation after mutations
- Country/metro city/org unit/role filtering on resource search

Demand Filling Enhancements:
- Two-phase fill modal: plan multiple resources, then confirm & assign all at once
- Availability preview per resource (available/partial/conflict days, existing bookings)
- Coverage bar showing demand hours distribution across assigned resources
- Fill demand from project detail page (new Assign button per demand)
- Fixed: filled demands no longer shown on timeline, demand bars no longer overlap

Budget per Role:
- DemandRequirement.budgetCents field (schema + API + UI)
- Project wizard step 3: budget input per role with allocation summary bar
- Project detail: allocated vs booked budget per demand
- Fill demand modal: role budget display with cost estimates
- AllocationModal: budget field for demand editing

Project Favorites:
- User.favoriteProjectIds (JSONB) with toggle API
- Star button on projects list and detail page (optimistic updates)
- "My Projects" dashboard widget (favorites + responsible person projects)

Project Management:
- Edit project from detail page (ProjectModal integration)
- Edit demands from detail page (AllocationModal integration)
- Admin-only project deletion (cascades assignments + demands)
- Create user accounts from admin panel

Timeline Fixes:
- Country multi-select filter with backend support
- URL param sync for same-page navigation (AI assistant integration)
- Demand lane stacking (no more overlapping bars)
- Single-day booking resize handles (always visible, min 6px)
- Single-day resize allowed (start === end)
- "All Clients" toggle (select all / deselect all)

Other Fixes:
- crypto.randomUUID fallback for non-secure contexts
- Chat message limit raised (200 max, client sends last 40)
- Status dropdown portal (no longer clipped by table overflow)
- Cents display restored in budget views (2 decimal places)
- Allocations grouped view with project sub-groups (collapsed by default)
- Server-side resource search for project wizard (no 500 limit)

Co-Authored-By: claude-flow <ruv@ruv.net>

apps/web/src/app/(app)/projects/ProjectsClient.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
 import { formatDate } from "~/lib/format.js";
 import type { Project, ColumnDef } from "@planarchy/shared";
 import { ProjectStatus, PROJECT_COLUMNS, BlueprintTarget } from "@planarchy/shared";
@@ -80,7 +81,9 @@ function BudgetBar({ utilizationPercent, budgetCents }: { utilizationPercent: nu
 
 function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: ProjectRow; isOpen: boolean; onOpen: () => void; onClose: () => void }) {
   const utils = trpc.useUtils();
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ top: 0, left: 0 });
 
   const updateStatus = trpc.project.updateStatus.useMutation({
     onSuccess: async () => {
@@ -89,18 +92,29 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
     },
   });
 
+  // Position the portal dropdown below the trigger button
+  useEffect(() => {
+    if (!isOpen || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setPos({ top: rect.bottom + 4, left: rect.left });
+  }, [isOpen]);
+
   useEffect(() => {
     if (!isOpen) return;
     function handleOutsideClick(e: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) onClose();
+      const target = e.target as Node;
+      if (triggerRef.current?.contains(target)) return;
+      if (panelRef.current?.contains(target)) return;
+      onClose();
     }
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, [isOpen, onClose]);
 
   return (
-    <div className="relative" ref={dropdownRef}>
+    <>
       <button
+        ref={triggerRef}
         type="button"
         onClick={(e) => { e.stopPropagation(); isOpen ? onClose() : onOpen(); }}
         className={clsx(
@@ -114,8 +128,12 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
         </svg>
       </button>
-      {isOpen && (
-        <div className="absolute left-0 top-full z-20 mt-2 min-w-[160px] rounded-2xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900">
+      {isOpen && createPortal(
+        <div
+          ref={panelRef}
+          className="fixed z-[9999] min-w-[160px] rounded-2xl border border-gray-200 bg-white p-2 shadow-xl dark:border-gray-700 dark:bg-gray-900"
+          style={{ top: pos.top, left: pos.left }}
+        >
           {ALL_STATUSES.map((s) => (
             <button
               key={s.value}
@@ -134,9 +152,10 @@ function StatusDropdown({ project, isOpen, onOpen, onClose }: { project: Project
               </span>
             </button>
           ))}
-        </div>
+        </div>,
+        document.body,
       )}
-    </div>
+    </>
   );
 }
 
@@ -182,6 +201,34 @@ export function ProjectsClient() {
     },
   });
 
+  // ─── Favorites ──────────────────────────────────────────────────────────
+  const { data: favoriteIds } = trpc.user.getFavoriteProjectIds.useQuery(undefined, { staleTime: 30_000 });
+  const favSet = useMemo(() => new Set(favoriteIds ?? []), [favoriteIds]);
+  const toggleFavMutation = trpc.user.toggleFavoriteProject.useMutation({
+    onMutate: async ({ projectId }) => {
+      // Cancel any outgoing refetches so they don't overwrite optimistic update
+      await utils.user.getFavoriteProjectIds.cancel();
+      // Snapshot previous value
+      const previous = utils.user.getFavoriteProjectIds.getData();
+      // Optimistically update the cache
+      const current = previous ?? [];
+      const next = current.includes(projectId)
+        ? current.filter((id: string) => id !== projectId)
+        : [...current, projectId];
+      utils.user.getFavoriteProjectIds.setData(undefined, next);
+      return { previous };
+    },
+    onError: (_err, _vars, context) => {
+      // Rollback on error
+      if (context?.previous !== undefined) {
+        utils.user.getFavoriteProjectIds.setData(undefined, context.previous);
+      }
+    },
+    onSettled: () => {
+      void utils.user.getFavoriteProjectIds.invalidate();
+    },
+  });
+
   // ─── Custom field columns from global blueprints ──────────────────────────
   const { data: globalFieldDefs } = trpc.blueprint.getGlobalFieldDefs.useQuery(
     { target: BlueprintTarget.PROJECT },
@@ -490,6 +537,7 @@ export function ProjectsClient() {
                   <tr>
                     {/* Drag handle column */}
                     <th className="w-8 px-2" />
+                    <th className="w-8 px-2" />
                     <th className="px-4 py-3 w-10">
                       <input
                         type="checkbox"
@@ -518,6 +566,16 @@ export function ProjectsClient() {
                         onDrop={(draggedId) => reorder(draggedId, project.id)}
                         className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
                       >
+                        <td className="px-2 py-3 w-8">
+                          <button
+                            type="button"
+                            onClick={(e) => { e.stopPropagation(); e.preventDefault(); toggleFavMutation.mutate({ projectId: project.id }); }}
+                            className={`text-sm transition-colors ${favSet.has(project.id) ? "text-amber-500 hover:text-amber-600" : "text-gray-300 hover:text-amber-400 dark:text-gray-600 dark:hover:text-amber-500"}`}
+                            title={favSet.has(project.id) ? "Remove from favorites" : "Add to favorites"}
+                          >
+                            {favSet.has(project.id) ? "★" : "☆"}
+                          </button>
+                        </td>
                         <td className="px-4 py-3">
                           <input
                             type="checkbox"

apps/web/src/app/(app)/projects/[id]/page.tsx

@@ -3,6 +3,8 @@ import { formatDate } from "~/lib/format.js";
 import Link from "next/link";
 import { createCaller } from "~/server/trpc.js";
 import { BudgetStatusCard } from "~/components/projects/BudgetStatusCard.js";
+import { ProjectDetailActions } from "~/components/projects/ProjectDetailClient.js";
+import { ProjectDemandsTable } from "~/components/projects/ProjectDemandsTable.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 interface ProjectDetailPageProps {
@@ -75,13 +77,16 @@ export default async function ProjectDetailPage({ params }: ProjectDetailPagePro
             </div>
             <h1 className="text-2xl font-bold text-gray-900">{project.name}</h1>
           </div>
-          <div className="text-right text-sm text-gray-500 flex-shrink-0">
-            <div className="font-medium text-gray-800">
-              {formatDate(project.startDate)}
-              {" — "}
-              {formatDate(project.endDate)}
+          <div className="flex items-start gap-4 flex-shrink-0">
+            <div className="text-right text-sm text-gray-500">
+              <div className="font-medium text-gray-800">
+                {formatDate(project.startDate)}
+                {" — "}
+                {formatDate(project.endDate)}
+              </div>
+              <div className="mt-0.5">Win probability: {project.winProbability}%</div>
             </div>
-            <div className="mt-0.5">Win probability: {project.winProbability}%</div>
+            <ProjectDetailActions project={project as never} />
           </div>
         </div>
 
@@ -169,7 +174,7 @@ export default async function ProjectDetailPage({ params }: ProjectDetailPagePro
                 </td>
                 <td className="px-4 py-3 text-sm text-gray-900">{assignment.hoursPerDay}h</td>
                 <td className="px-4 py-3 text-sm text-gray-900">
-                  {(assignment.dailyCostCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 0 })} €
+                  {(assignment.dailyCostCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} €
                 </td>
                 <td className="px-4 py-3">
                   <span
@@ -187,65 +192,11 @@ export default async function ProjectDetailPage({ params }: ProjectDetailPagePro
         )}
       </div>
 
-      {/* Open demands table */}
-      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">
-            Open Demands ({project.demands.length})
-          </h2>
-        </div>
-        <table className="w-full">
-          <thead className="bg-gray-50 border-b border-gray-200">
-            <tr>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Role
-              </th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Period
-              </th>
-              <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Requested
-              </th>
-              <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Unfilled
-              </th>
-              <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Hours/Day
-              </th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Status
-              </th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-gray-100">
-            {project.demands.map((demand) => (
-              <tr key={demand.id} className="hover:bg-gray-50 transition-colors">
-                <td className="px-4 py-3 text-sm text-gray-900">
-                  {demand.roleEntity?.name ?? demand.role ?? "Unassigned"}
-                </td>
-                <td className="px-4 py-3 text-xs text-gray-500">
-                  {formatDate(demand.startDate)}
-                  {" → "}
-                  {formatDate(demand.endDate)}
-                </td>
-                <td className="px-4 py-3 text-sm text-right text-gray-900">{demand.requestedHeadcount}</td>
-                <td className="px-4 py-3 text-sm text-right text-gray-900">{demand.unfilledHeadcount}</td>
-                <td className="px-4 py-3 text-sm text-right text-gray-900">{demand.hoursPerDay}h</td>
-                <td className="px-4 py-3">
-                  <span
-                    className={`inline-block px-2 py-0.5 text-xs rounded-full ${ALLOC_STATUS_COLORS[demand.status] ?? "bg-gray-100 text-gray-600"}`}
-                  >
-                    {demand.status}
-                  </span>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        {project.demands.length === 0 && (
-          <div className="text-center py-12 text-gray-500 text-sm">No open demands for this project.</div>
-        )}
-      </div>
+      {/* Open demands table (client component with fill action) */}
+      <ProjectDemandsTable
+        demands={project.demands as never}
+        project={{ id: project.id, name: project.name, shortCode: project.shortCode }}
+      />
     </div>
   );
 }