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/components/dashboard/widgets/ProjectTableWidget.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import { trpc } from "~/lib/trpc/client.js";
 import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
 import { ProjectStatus } from "@planarchy/shared/types";
@@ -63,8 +64,10 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
     shortCode: string;
     name: string;
     status: string;
+    budgetCents: number;
     totalCostCents: number;
     totalPersonDays: number;
+    utilizationPercent: number;
   }
   const list = ((projects as unknown as { projects: ProjectRow[] } | undefined)?.projects ??
     []) as ProjectRow[];
@@ -210,7 +213,7 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
                     onClick={() => toggleSort("personDays")}
                     className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer"
                   >
-                    Person Days
+                    PD
                     <span className="text-[10px] ml-0.5">
                       {sortKey === "personDays" ? (
                         sortDir === "asc" ? (
@@ -223,35 +226,62 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
                       )}
                     </span>
                   </button>
-                  <InfoTooltip content="Total working days allocated across all non-cancelled allocations (sum of allocation durations in working days)." />
+                  <InfoTooltip content="Total person-days across all non-cancelled allocations." />
                 </span>
               </th>
+              <th className="px-3 py-2 text-right font-medium text-gray-500">
+                Budget
+              </th>
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
-            {sorted.map((p) => (
-              <tr key={p.id} className="transition hover:bg-gray-50 dark:hover:bg-gray-800/60">
-                <td className="px-3 py-2 font-mono text-gray-600 dark:text-gray-300">
-                  {p.shortCode}
-                </td>
-                <td className="px-3 py-2 max-w-[180px] truncate font-medium text-gray-900 dark:text-gray-100">
-                  {p.name}
-                </td>
-                <td className="px-3 py-2">
-                  <span
-                    className={`inline-block px-1.5 py-0.5 rounded-full text-xs ${STATUS_COLORS[p.status] ?? ""}`}
-                  >
-                    {p.status}
-                  </span>
-                </td>
-                <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-200">
-                  {(p.totalCostCents / 100).toLocaleString("de-DE", { maximumFractionDigits: 0 })} €
-                </td>
-                <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-200">
-                  {p.totalPersonDays}d
-                </td>
-              </tr>
-            ))}
+            {sorted.map((p) => {
+              const overBudget = p.budgetCents > 0 && p.totalCostCents > p.budgetCents;
+              const util = p.utilizationPercent;
+              return (
+                <tr key={p.id} className="transition hover:bg-gray-50 dark:hover:bg-gray-800/60">
+                  <td className="px-3 py-2 font-mono text-gray-600 dark:text-gray-300">
+                    {p.shortCode}
+                  </td>
+                  <td className="px-3 py-2 max-w-[180px] truncate font-medium">
+                    <Link
+                      href={`/projects/${p.id}`}
+                      className="text-gray-900 dark:text-gray-100 hover:text-brand-600 dark:hover:text-brand-400 hover:underline"
+                    >
+                      {p.name}
+                    </Link>
+                  </td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-1.5 py-0.5 rounded-full text-xs ${STATUS_COLORS[p.status] ?? ""}`}
+                    >
+                      {p.status}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-200">
+                    {(p.totalCostCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 2 })} €
+                  </td>
+                  <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-200">
+                    {p.totalPersonDays}d
+                  </td>
+                  <td className="px-3 py-2 text-right">
+                    {p.budgetCents > 0 ? (
+                      <div className="flex items-center justify-end gap-1.5">
+                        <span className="text-gray-700 dark:text-gray-200">
+                          {(p.budgetCents / 100).toLocaleString("de-DE", { minimumFractionDigits: 0 })} €
+                        </span>
+                        <span
+                          className={`inline-block w-2 h-2 rounded-full flex-shrink-0 ${overBudget ? "bg-red-500" : util >= 80 ? "bg-amber-500" : "bg-green-500"}`}
+                          title={`${util}% utilized${overBudget ? " — over budget!" : ""}`}
+                        />
+                      </div>
+                    ) : (
+                      <span className="text-gray-400 dark:text-gray-600">—</span>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
           </tbody>
         </table>
         {list.length === 0 && (