fix: enhance ReportsToPicker to handle unknown and terminated managers

- Added handling for cases where the selected manager is terminated, displaying a distinct style and message.
- Introduced a new state for unknown managers, providing user feedback when the saved manager is missing.
- Improved layout for displaying current manager status, ensuring clarity in the UI.

ui/src/components/ReportsToPicker.tsx

@@ -33,6 +33,8 @@ export function ReportsToPicker({
     (a) => a.status !== "terminated" && !exclude.has(a.id),
   );
   const current = value ? agents.find((a) => a.id === value) : null;
+  const terminatedManager = current?.status === "terminated";
+  const unknownManager = Boolean(value && !current);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -41,14 +43,22 @@ export function ReportsToPicker({
           type="button"
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
+            terminatedManager && "border-amber-600/45 bg-amber-500/5",
             disabled && "opacity-60 cursor-not-allowed",
           )}
           disabled={disabled}
         >
-          {current ? (
+          {unknownManager ? (
+            <>
+              <User className="h-3 w-3 text-muted-foreground" />
+              <span className="text-muted-foreground">Unknown manager (stale ID)</span>
+            </>
+          ) : current ? (
             <>
               <AgentIcon icon={current.icon} className="h-3 w-3 text-muted-foreground" />
-              {`Reports to ${current.name}${current.status === "terminated" ? " (terminated)" : ""}`}
+              <span className={cn(terminatedManager && "text-amber-900 dark:text-amber-200")}>
+                {`Reports to ${current.name}${terminatedManager ? " (terminated)" : ""}`}
+              </span>
             </>
           ) : (
             <>
@@ -72,6 +82,19 @@ export function ReportsToPicker({
         >
           No manager
         </button>
+        {terminatedManager && (
+          <div className="flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground border-b border-border mb-0.5">
+            <AgentIcon icon={current.icon} className="shrink-0 h-3 w-3" />
+            <span className="truncate min-w-0">
+              Current: {current.name} (terminated)
+            </span>
+          </div>
+        )}
+        {unknownManager && (
+          <div className="px-2 py-1.5 text-xs text-muted-foreground border-b border-border mb-0.5">
+            Saved manager is missing from this company. Choose a new manager or clear.
+          </div>
+        )}
         {rows.map((a) => (
           <button
             type="button"