feat: project colors, timeline filters, sidebar fix, GitLooper agent, and misc improvements

- Fix sidebar double-highlight on /vacations/my (Gitea #6): add isNavItemActive() helper
- Add project color picker (schema + API + modal + timeline rendering)
- Add ProjectCombobox/ResourceCombobox to timeline toolbar
- Show PENDING vacations on timeline with dashed/dimmed style
- Add "show demand projects" preference with localStorage persistence
- Add ProjectAssignmentsTable with total hours/cost columns
- Extend vacation API to accept status arrays
- Add GitLooper formal YAML agent configuration
- Extend user admin with permission overrides UI
- Add delete-assignment use case tests
- Add status-styles.ts shared badge constants
- Centralize formatMoney/formatCents in format.ts

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

apps/web/src/components/timeline/TimelineResourcePanel.tsx

@@ -684,20 +684,22 @@ function renderVacationBlocksForRow(blocks: VacationBlockInfo[], rowHeight: numb
     const colorClass = TYPE_COLORS[v.type] ?? "bg-orange-400/40";
     const borderClass = TYPE_BORDER[v.type] ?? "border-orange-500";
     const label = TYPE_LABELS_SHORT[v.type] ?? v.type;
+    const isPending = v.status === "PENDING";
 
     return (
       <div
         key={`vac-${v.id}`}
         className={clsx(
-          "absolute z-[5] flex items-end px-1 pb-0.5 overflow-hidden border-t-2 pointer-events-none",
+          "absolute z-[5] flex items-end px-1 pb-0.5 overflow-hidden pointer-events-none",
           colorClass,
-          borderClass,
+          isPending ? "border-t-2 border-dashed opacity-60" : "border-t-2",
+          isPending ? "" : borderClass,
         )}
         style={{ left: left + 1, width: width - 2, top: 0, height: rowHeight }}
       >
         {width > 40 && (
           <span className="text-[9px] font-bold truncate opacity-70 text-gray-700 dark:text-gray-200 pointer-events-none">
-            🏖 {label}
+            {isPending ? "\u23F3" : "\uD83C\uDFD6"} {label}
           </span>
         )}
       </div>
@@ -776,6 +778,7 @@ function renderAllocBlocksFromData(
     const blockTop = 8 + lane * SUB_LANE_HEIGHT;
     const blockHeight = SUB_LANE_HEIGHT - 8;
 
+    const customColor = (alloc.project as { color?: string | null }).color;
     const colors = ORDER_TYPE_COLORS[alloc.project.orderType] ?? {
       bg: "bg-gray-400",
       text: "text-white",
@@ -800,8 +803,8 @@ function renderAllocBlocksFromData(
         key={alloc.id}
         className={clsx(
           "absolute rounded-md flex items-stretch overflow-hidden transition-all duration-75 group/block",
-          colors.bg,
-          colors.text,
+          !customColor && colors.bg,
+          customColor ? "text-white" : colors.text,
           hasRecurrence && "opacity-80 border-2 border-dashed border-white/60",
           isBeingDragged
             ? "opacity-90 shadow-2xl ring-2 ring-white ring-offset-1 z-20 scale-[1.01]"
@@ -809,7 +812,13 @@ function renderAllocBlocksFromData(
               ? "opacity-30 z-[10]"
               : "hover:ring-2 hover:ring-white hover:ring-offset-1 z-[10]",
         )}
-        style={{ left: left + 2, width: width - 4, top: blockTop, height: blockHeight }}
+        style={{
+          left: left + 2,
+          width: width - 4,
+          top: blockTop,
+          height: blockHeight,
+          ...(customColor ? { backgroundColor: customColor } : {}),
+        }}
         onContextMenu={(e) => {
           e.preventDefault();
           e.stopPropagation();