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/[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>
   );
 }