fix(ux): resolve tickets #51 #53 #54 from gitlooper sweep

- #51: Add permanent redirect /login → /auth/signin in next.config.ts
  so users/testers who type the common alias land on the correct auth page
- #53: Add "Allocations → New Planning Entry" link to empty states of
  ProjectDemandsTable and ProjectAssignmentsTable; add shortcut link in
  demands table header for canEdit users
- #54: Track confirmed dropdown selection in ResourcePersonPicker —
  green ring + checkmark icon shown when user picks from suggestions;
  cleared on any manual keypress so free-text is clearly unconfirmed

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

apps/web/next.config.ts

@@ -18,6 +18,12 @@ const nextConfig: NextConfig = {
     "@capakraken/ui",
   ],
   typedRoutes: true,
+  async redirects() {
+    return [
+      // Common URL alias — redirect to the real auth entry point
+      { source: "/login", destination: "/auth/signin", permanent: true },
+    ];
+  },
   async headers() {
     return [
       {

apps/web/src/components/projects/ProjectAssignmentsTable.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useMemo } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { formatCents, formatDate, formatMoney } from "~/lib/format.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { ALLOCATION_STATUS_BADGE } from "~/lib/status-styles.js";
@@ -199,7 +200,18 @@ export function ProjectAssignmentsTable({ assignments }: ProjectAssignmentsTable
         })()}
       </table>
       {assignments.length === 0 && (
-        <div className="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">No assignments for this project.</div>
+        <div className="text-center py-12 text-sm text-gray-500 dark:text-gray-400 space-y-2">
+          <p>No assignments for this project.</p>
+          {canEdit && (
+            <p>
+              Create staffing entries via{" "}
+              <Link href="/allocations" className="text-brand-600 hover:underline dark:text-brand-400">
+                Allocations → New Planning Entry
+              </Link>
+              .
+            </p>
+          )}
+        </div>
       )}
     </div>
   );

apps/web/src/components/projects/ProjectDemandsTable.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { formatCents, formatDate } from "~/lib/format.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { FillOpenDemandModal } from "~/components/allocations/FillOpenDemandModal.js";
@@ -59,11 +60,21 @@ export function ProjectDemandsTable({ demands, project }: ProjectDemandsTablePro
           <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
             Open Demands ({allDemands.length})
           </h2>
-          {activeDemands.length > 0 && (
+          <div className="flex items-center gap-3">
-            <span className="text-xs text-amber-600 dark:text-amber-400">
+            {activeDemands.length > 0 && (
-              {activeDemands.reduce((sum, d) => sum + d.unfilledHeadcount, 0)} seats unfilled
+              <span className="text-xs text-amber-600 dark:text-amber-400">
-            </span>
+                {activeDemands.reduce((sum, d) => sum + d.unfilledHeadcount, 0)} seats unfilled
-          )}
+              </span>
+            )}
+            {canEdit && (
+              <Link
+                href="/allocations"
+                className="text-xs font-medium text-brand-600 hover:text-brand-800 dark:text-brand-400 dark:hover:text-brand-200"
+              >
+                + New in Allocations
+              </Link>
+            )}
+          </div>
         </div>
         <table className="w-full">
           <thead className="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
@@ -192,7 +203,18 @@ export function ProjectDemandsTable({ demands, project }: ProjectDemandsTablePro
           </tbody>
         </table>
         {allDemands.length === 0 && (
-          <div className="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">No open demands for this project.</div>
+          <div className="text-center py-12 text-sm text-gray-500 dark:text-gray-400 space-y-2">
+            <p>No open demands for this project.</p>
+            {canEdit && (
+              <p>
+                Create staffing entries via{" "}
+                <Link href="/allocations" className="text-brand-600 hover:underline dark:text-brand-400">
+                  Allocations → New Planning Entry
+                </Link>
+                .
+              </p>
+            )}
+          </div>
         )}
       </div>
 

apps/web/src/components/projects/ProjectWizard.tsx

@@ -309,6 +309,9 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
   const [query, setQuery] = useState(value);
   const [open, setOpen] = useState(false);
   const [debouncedSearch, setDebouncedSearch] = useState("");
+  // Tracks whether the current value was explicitly chosen from the dropdown
+  // vs typed as free text. Cleared on any manual keypress.
+  const [isConfirmed, setIsConfirmed] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Debounce search query to avoid excessive API calls
@@ -331,6 +334,8 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
   // Sync local query when external value changes (e.g. wizard reset)
   useEffect(() => {
     setQuery(value);
+    // If the external value is cleared (reset), also clear the confirmed state
+    if (!value) setIsConfirmed(false);
   }, [value]);
 
   const { panelRef, position } = useAnchoredOverlay<HTMLInputElement>({
@@ -350,12 +355,20 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
         onChange={(e) => {
           setQuery(e.target.value);
           onChange(e.target.value);
+          setIsConfirmed(false); // User is typing — selection no longer confirmed
           setOpen(true);
         }}
         onFocus={() => setOpen(true)}
         placeholder="Search by name or EID…"
-        className={INPUT_CLS}
+        className={`${INPUT_CLS} ${isConfirmed ? "ring-2 ring-green-400 ring-offset-0" : ""}`}
       />
+      {isConfirmed && (
+        <span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-green-500">
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+          </svg>
+        </span>
+      )}
       {open && filtered.length > 0 && typeof document !== "undefined"
         ? createPortal(
             <div
@@ -376,6 +389,7 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
                       onMouseDown={() => {
                         onChange(r.displayName);
                         setQuery(r.displayName);
+                        setIsConfirmed(true);
                         setOpen(false);
                       }}
                       className="flex w-full items-baseline gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50"