@agent-native/core 0.171.0 → 0.171.3

package/corpus/README.md

@@ -31,4 +31,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- template files: 8585
+- template files: 8586

package/corpus/templates/analytics/app/components/layout/Sidebar.tsx

@@ -2450,17 +2450,15 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                       : "text-muted-foreground hover:bg-sidebar-accent/50",
                   )}
                 >
-                  <button
-                    type="button"
-                    onClick={toggleDashOpen}
+                  <Link
+                    to="/dashboards"
                     className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2 text-start"
-                    aria-expanded={dashOpen}
                   >
                     <IconChartBar className="h-4 w-4 shrink-0" />
                     <span className="min-w-0 flex-1 truncate">
                       {t("navigation.dashboards")}
                     </span>
-                  </button>
+                  </Link>
                   <SidebarSectionSettingsPopover
                     label={t("navigation.dashboards")}
                     sortMode={dashboardSortMode}
@@ -2477,6 +2475,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                         ? t("sidebar.collapseDashboards")
                         : t("sidebar.expandDashboards")
                     }
+                    aria-expanded={dashOpen}
                   >
                     <IconChevronDown
                       className={cn(

package/corpus/templates/analytics/server/lib/workspace-feature-flags.ts

@@ -1,6 +1,10 @@
 import { randomUUID } from "node:crypto";
 
 import { signA2AToken } from "@agent-native/core/a2a";
+import {
+  ActionContractError,
+  AgentActionStopError,
+} from "@agent-native/core/action";
 import { isFeatureFlagEnabled } from "@agent-native/core/feature-flags";
 import { fetchOrgApps, type OrgApp } from "@agent-native/core/mcp";
 import { getOrgDomain } from "@agent-native/core/org";
@@ -9,6 +13,7 @@ import { VERIFIED_FLEET_FLAG_MUTATIONS } from "../../shared/feature-flags.js";
 import type { AnalyticsAdminContext } from "./db-admin-connections.js";
 
 const TARGET_TIMEOUT_MS = 3_000;
+const VERIFICATION_ATTEMPTS = 2;
 const CONCURRENCY = 4;
 
 export type FleetFlagState =
@@ -197,6 +202,8 @@ export type WorkspaceFeatureFlagFailurePhase =
   | "unsupported-target"
   | "target-action"
   | "persistence"
+  | "verification-timeout"
+  | "verification-network"
   | "verification";
 
 const FAILURE_MESSAGES: Record<WorkspaceFeatureFlagFailurePhase, string> = {
@@ -211,16 +218,42 @@ const FAILURE_MESSAGES: Record<WorkspaceFeatureFlagFailurePhase, string> = {
   "target-action": "The target app could not complete the feature flag action.",
   persistence:
     "The target app did not persist the requested feature flag rules.",
+  "verification-timeout":
+    "The feature flag change persisted, but the target app timed out during verification.",
+  "verification-network":
+    "The feature flag change persisted, but Analytics could not reach the target app during verification.",
   verification: "Analytics could not verify the persisted feature flag change.",
 };
 
-export class WorkspaceFeatureFlagFailure extends Error {
+export class WorkspaceFeatureFlagFailure extends AgentActionStopError {
   constructor(readonly phase: WorkspaceFeatureFlagFailurePhase) {
-    super(`[${phase}] ${FAILURE_MESSAGES[phase]}`);
+    const message = `[${phase}] ${FAILURE_MESSAGES[phase]}`;
+    const errorCode = `workspace_feature_flag_${phase.replace("-", "_")}`;
+    super(message, {
+      errorCode,
+      details: { phase },
+      toolResult: JSON.stringify({ error: errorCode, phase, message }),
+    });
     this.name = "WorkspaceFeatureFlagFailure";
   }
 }
 
+class WorkspaceFeatureFlagSetupFailure extends ActionContractError {
+  readonly phase: "directory" | "token-generation";
+
+  constructor(phase: "directory" | "token-generation") {
+    const message = `[${phase}] ${FAILURE_MESSAGES[phase]}`;
+    const errorCode = `workspace_feature_flag_${phase.replace("-", "_")}`;
+    super(message, {
+      errorCode,
+      details: { phase },
+      statusCode: 503,
+    });
+    this.name = "WorkspaceFeatureFlagSetupFailure";
+    this.phase = phase;
+  }
+}
+
 type TargetFailureReason = "token-generation" | "timeout" | "network";
 
 class TargetCallFailure extends Error {
@@ -242,6 +275,16 @@ export function classifyWorkspaceFeatureFlagTargetFailure(
   return "network";
 }
 
+function isSyntaxError(error: unknown): boolean {
+  return (
+    error instanceof SyntaxError ||
+    (!!error &&
+      typeof error === "object" &&
+      "name" in error &&
+      error.name === "SyntaxError")
+  );
+}
+
 function targetFailure(error: unknown): WorkspaceFeatureFlagFailure {
   const reason = classifyWorkspaceFeatureFlagTargetFailure(error);
   return new WorkspaceFeatureFlagFailure(reason);
@@ -259,10 +302,10 @@ async function resolveTargetApp(
       serviceOrgId: admin.orgId,
     });
   } catch {
-    throw new WorkspaceFeatureFlagFailure("directory");
+    throw new WorkspaceFeatureFlagSetupFailure("directory");
   }
   const app = apps.find((candidate) => candidate.id === appId);
-  if (!app) throw new WorkspaceFeatureFlagFailure("directory");
+  if (!app) throw new WorkspaceFeatureFlagSetupFailure("directory");
   return app;
 }
 
@@ -302,12 +345,41 @@ async function callTarget(
   let parsed: unknown = null;
   try {
     parsed = await response.json();
-  } catch {
-    // A legacy/non-action endpoint is classified below without reflecting body.
+  } catch (error) {
+    const successfulResponse = response.status >= 200 && response.status < 300;
+    if (successfulResponse && !isSyntaxError(error))
+      throw new TargetCallFailure(
+        classifyWorkspaceFeatureFlagTargetFailure(error),
+      );
+    // Invalid legacy payloads and non-success statuses are classified below.
   }
   return { status: response.status, body: parsed };
 }
 
+async function readBackTarget(
+  app: OrgApp,
+  admin: AnalyticsAdminContext,
+  orgDomain: string,
+): Promise<{ status: number; body: unknown }> {
+  for (let attempt = 1; attempt <= VERIFICATION_ATTEMPTS; attempt += 1) {
+    try {
+      return await callTarget(app, admin, "list-feature-flags", {}, orgDomain);
+    } catch (error) {
+      const reason = classifyWorkspaceFeatureFlagTargetFailure(error);
+      const retryable = reason === "timeout" || reason === "network";
+      if (retryable && attempt < VERIFICATION_ATTEMPTS) continue;
+      throw new WorkspaceFeatureFlagFailure(
+        reason === "timeout"
+          ? "verification-timeout"
+          : reason === "network"
+            ? "verification-network"
+            : reason,
+      );
+    }
+  }
+  throw new WorkspaceFeatureFlagFailure("verification");
+}
+
 export function classifyWorkspaceFeatureFlagList(
   app: OrgApp,
   result: { status: number; body: unknown },
@@ -404,9 +476,10 @@ export async function setWorkspaceFeatureFlag(
   try {
     orgDomain = (await getOrgDomain(admin.orgId))?.trim().toLowerCase();
   } catch {
-    throw new WorkspaceFeatureFlagFailure("token-generation");
+    throw new WorkspaceFeatureFlagSetupFailure("token-generation");
   }
-  if (!orgDomain) throw new WorkspaceFeatureFlagFailure("token-generation");
+  if (!orgDomain)
+    throw new WorkspaceFeatureFlagSetupFailure("token-generation");
   let result: Awaited<ReturnType<typeof callTarget>>;
   try {
     result = await callTarget(
@@ -417,6 +490,8 @@ export async function setWorkspaceFeatureFlag(
       orgDomain,
     );
   } catch (error) {
+    if (classifyWorkspaceFeatureFlagTargetFailure(error) === "token-generation")
+      throw new WorkspaceFeatureFlagSetupFailure("token-generation");
     throw targetFailure(error);
   }
   if (result.status === 401 || result.status === 403)
@@ -465,18 +540,7 @@ export async function setWorkspaceFeatureFlag(
     return mutation;
   }
 
-  let readBack: Awaited<ReturnType<typeof callTarget>>;
-  try {
-    readBack = await callTarget(
-      app,
-      admin,
-      "list-feature-flags",
-      {},
-      orgDomain,
-    );
-  } catch (error) {
-    throw targetFailure(error);
-  }
+  const readBack = await readBackTarget(app, admin, orgDomain);
   if (readBack.status === 401 || readBack.status === 403)
     throw new WorkspaceFeatureFlagFailure("authorization");
   if (readBack.status === 404 || readBack.status === 405)

package/corpus/templates/calendar/actions/create-event.ts

@@ -216,10 +216,16 @@ export default defineAction({
     };
 
     let zoomMeetingLink: string | undefined;
+    let videoConferenceError: CalendarEvent["videoConferenceError"];
     if (args.addZoom) {
-      const zoom = await prepareZoomMeetingPatch(email, calEvent);
-      zoomMeetingLink = zoom.meetingLink;
-      Object.assign(calEvent, zoom.patch);
+      try {
+        const zoom = await prepareZoomMeetingPatch(email, calEvent);
+        zoomMeetingLink = zoom.meetingLink;
+        Object.assign(calEvent, zoom.patch);
+      } catch (error) {
+        videoConferenceError = "zoom";
+        console.error("[create-event] Zoom meeting provisioning failed", error);
+      }
     }
 
     const result = await googleCalendar.createEvent(calEvent, {
@@ -238,6 +244,8 @@ export default defineAction({
     if (result.meetLink) calEvent.hangoutLink = result.meetLink;
     if (result.conferenceData) calEvent.conferenceData = result.conferenceData;
     if (zoomMeetingLink) calEvent.meetingLink = zoomMeetingLink;
+    if (videoConferenceError)
+      calEvent.videoConferenceError = videoConferenceError;
 
     try {
       emit(

package/corpus/templates/calendar/app/components/calendar/AddCalendarDialog.tsx

@@ -1,4 +1,3 @@
-import { callAction } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import {
   IconSearch,
@@ -8,7 +7,7 @@ import {
   IconLink,
   IconCalendarPlus,
 } from "@tabler/icons-react";
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -31,17 +30,12 @@ import {
   useAddOverlayPerson,
   useRemoveOverlayPerson,
 } from "@/hooks/use-overlay-people";
-
-interface SearchResult {
-  name: string;
-  email: string;
-  photoUrl?: string;
-}
-
-interface SearchResponse {
-  results: SearchResult[];
-  scopeRequired?: boolean;
-}
+import {
+  filterPeopleResults,
+  mergePeopleResults,
+  usePeopleContacts,
+  usePeopleSearch,
+} from "@/hooks/use-people";
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const URL_REGEX = /^(https?|webcal):\/\/.+/i;
@@ -67,7 +61,7 @@ export function AddCalendarDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[440px] gap-0 p-0 top-[8%] translate-y-0">
+      <DialogContent className="sm:max-w-[440px] max-h-[calc(85vh-1rem)] gap-0 overflow-y-auto p-0 top-[15vh] !translate-y-0">
         <DialogHeader className="px-4 pt-4 pb-0">
           <DialogTitle className="text-base">
             {t("eventForm.addCalendar")}
@@ -89,7 +83,7 @@ export function AddCalendarDialog({
           </TabsList>
 
           <TabsContent value="people" className="mt-0">
-            <PeopleTab onClose={() => onOpenChange(false)} />
+            <PeopleTab open={open} />
           </TabsContent>
 
           <TabsContent value="url" className="mt-0 px-4 pb-4 pt-3">
@@ -103,15 +97,12 @@ export function AddCalendarDialog({
 
 // ─── People tab ──────────────────────────────────────────────────────────────
 
-function PeopleTab({ onClose: _ }: { onClose: () => void }) {
+function PeopleTab({ open }: { open: boolean }) {
   const t = useT();
   const [query, setQuery] = useState("");
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [scopeRequired, setScopeRequired] = useState(false);
-  const [searching, setSearching] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(-1);
   const inputRef = useRef<HTMLInputElement>(null);
-  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const listRef = useRef<HTMLDivElement>(null);
   const shouldScrollActiveResultRef = useRef(false);
 
@@ -119,46 +110,57 @@ function PeopleTab({ onClose: _ }: { onClose: () => void }) {
   const overlayPeople = Array.isArray(rawOverlayPeople) ? rawOverlayPeople : [];
   const addPerson = useAddOverlayPerson();
   const removePerson = useRemoveOverlayPerson();
+  const contacts = usePeopleContacts("directory", open);
+  const directorySearch = usePeopleSearch(searchQuery, open, "directory");
 
-  const overlayEmails = new Set(overlayPeople.map((p) => p.email));
-  const selectableResults = results.filter((r) => !overlayEmails.has(r.email));
-
-  const search = useCallback(async (q: string) => {
-    setSearching(true);
-    try {
-      const data = await callAction<SearchResponse>(
-        "search-people",
-        q ? { q, scope: "directory" } : { scope: "directory" },
-        { method: "GET" },
-      );
-      setResults(data.results ?? []);
-      setScopeRequired(data.scopeRequired ?? false);
-    } catch {
-      // ignore
-    } finally {
-      setSearching(false);
-    }
-  }, []);
+  const overlayEmails = useMemo(
+    () => new Set(overlayPeople.map((p) => p.email.toLowerCase())),
+    [overlayPeople],
+  );
+
+  const results = useMemo(
+    () =>
+      filterPeopleResults(
+        mergePeopleResults(
+          contacts.data?.results,
+          directorySearch.data?.results,
+        ),
+        query,
+        new Set(),
+      ),
+    [contacts.data?.results, directorySearch.data?.results, query],
+  );
+  const selectableResults = results.filter(
+    (r) => !overlayEmails.has(r.email.toLowerCase()),
+  );
+
+  const searching =
+    contacts.isLoading ||
+    contacts.isFetching ||
+    directorySearch.isLoading ||
+    directorySearch.isFetching;
+  const scopeRequired = Boolean(
+    contacts.data?.scopeRequired || directorySearch.data?.scopeRequired,
+  );
 
   useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => search(query), query ? 300 : 0);
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
-  }, [query, search]);
+    const timeout = window.setTimeout(
+      () => setSearchQuery(query),
+      query.trim() ? 300 : 0,
+    );
+    return () => window.clearTimeout(timeout);
+  }, [query]);
 
   useEffect(() => {
     setActiveIndex(results.length > 0 ? 0 : -1);
   }, [results]);
 
   useEffect(() => {
+    if (!open) return;
     setQuery("");
-    setResults([]);
-    setScopeRequired(false);
+    setSearchQuery("");
     setActiveIndex(-1);
-    search("");
-  }, [search]);
+  }, [open]);
 
   useEffect(() => {
     if (
@@ -198,7 +200,10 @@ function PeopleTab({ onClose: _ }: { onClose: () => void }) {
         return;
       }
       const trimmed = query.trim();
-      if (EMAIL_REGEX.test(trimmed) && !overlayEmails.has(trimmed)) {
+      if (
+        EMAIL_REGEX.test(trimmed) &&
+        !overlayEmails.has(trimmed.toLowerCase())
+      ) {
         handleAdd(trimmed);
         setQuery("");
       }
@@ -229,7 +234,7 @@ function PeopleTab({ onClose: _ }: { onClose: () => void }) {
           className="max-h-48 overflow-y-auto border-t border-border"
         >
           {results.map((person) => {
-            const alreadyAdded = overlayEmails.has(person.email);
+            const alreadyAdded = overlayEmails.has(person.email.toLowerCase());
             const selectableIdx = selectableResults.indexOf(person);
             const isActive = !alreadyAdded && selectableIdx === activeIndex;
             return (

package/corpus/templates/calendar/app/components/calendar/CreateEventDialog.tsx

@@ -856,6 +856,9 @@ export function CreateEventPopover({
           deletePersistedDraft(activeDraftId);
           onDraftCreated?.(activeDraftId);
         }
+        if (result?.videoConferenceError === "zoom") {
+          toast.error(t("eventForm.zoomAddFailed"));
+        }
         const eventId = result?.id;
         const undo = eventId
           ? () => {

package/corpus/templates/calendar/app/components/calendar/DayView.tsx

@@ -297,7 +297,7 @@ const DayEventCard = memo(function DayEventCard({
       style={{
         ...posStyle,
         left: `calc(${li.left}% + ${li.indent}px)`,
-        width: `calc(${li.width}% - ${li.indent * 2 + 2}px)`,
+        width: `calc(${li.width}% - ${li.indent + 2}px)`,
         zIndex:
           isBeingDragged && isDragging
             ? 100

package/corpus/templates/calendar/app/components/calendar/PeopleSearchDialog.tsx

@@ -1,4 +1,3 @@
-import { callAction } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import {
   IconSearch,
@@ -6,7 +5,7 @@ import {
   IconUserPlus,
   IconLoader2,
 } from "@tabler/icons-react";
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 
 import {
   Dialog,
@@ -19,17 +18,12 @@ import {
   useAddOverlayPerson,
   useRemoveOverlayPerson,
 } from "@/hooks/use-overlay-people";
-
-interface SearchResult {
-  name: string;
-  email: string;
-  photoUrl?: string;
-}
-
-interface SearchResponse {
-  results: SearchResult[];
-  scopeRequired?: boolean;
-}
+import {
+  filterPeopleResults,
+  mergePeopleResults,
+  usePeopleContacts,
+  usePeopleSearch,
+} from "@/hooks/use-people";
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
@@ -44,12 +38,8 @@ export function PeopleSearchDialog({
 }: PeopleSearchDialogProps) {
   const t = useT();
   const [query, setQuery] = useState("");
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [scopeRequired, setScopeRequired] = useState(false);
-  const [searching, setSearching] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(-1);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const listRef = useRef<HTMLDivElement>(null);
   const shouldScrollActiveResultRef = useRef(false);
 
@@ -57,52 +47,61 @@ export function PeopleSearchDialog({
   const overlayPeople = Array.isArray(rawOverlayPeople) ? rawOverlayPeople : [];
   const addPerson = useAddOverlayPerson();
   const removePerson = useRemoveOverlayPerson();
+  const contacts = usePeopleContacts("directory", open);
+  const directorySearch = usePeopleSearch(searchQuery, open, "directory");
+
+  const overlayEmails = useMemo(
+    () => new Set(overlayPeople.map((p) => p.email.toLowerCase())),
+    [overlayPeople],
+  );
 
-  const overlayEmails = new Set(overlayPeople.map((p) => p.email));
+  const results = useMemo(
+    () =>
+      filterPeopleResults(
+        mergePeopleResults(
+          contacts.data?.results,
+          directorySearch.data?.results,
+        ),
+        query,
+        new Set(),
+      ),
+    [contacts.data?.results, directorySearch.data?.results, query],
+  );
 
   // Selectable results (exclude already-added)
-  const selectableResults = results.filter((r) => !overlayEmails.has(r.email));
+  const selectableResults = results.filter(
+    (r) => !overlayEmails.has(r.email.toLowerCase()),
+  );
 
-  const search = useCallback(async (q: string) => {
-    setSearching(true);
-    try {
-      const data = await callAction<SearchResponse>(
-        "search-people",
-        q ? { q, scope: "directory" } : { scope: "directory" },
-        { method: "GET" },
-      );
-      setResults(data.results ?? []);
-      setScopeRequired(data.scopeRequired ?? false);
-    } catch {
-      // ignore
-    } finally {
-      setSearching(false);
-    }
-  }, []);
+  const searching =
+    contacts.isLoading ||
+    contacts.isFetching ||
+    directorySearch.isLoading ||
+    directorySearch.isFetching;
+  const scopeRequired = Boolean(
+    contacts.data?.scopeRequired || directorySearch.data?.scopeRequired,
+  );
 
   useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => search(query), query ? 300 : 0);
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
-  }, [query, search]);
+    const timeout = window.setTimeout(
+      () => setSearchQuery(query),
+      query.trim() ? 300 : 0,
+    );
+    return () => window.clearTimeout(timeout);
+  }, [query]);
 
   // Reset active index when results change
   useEffect(() => {
     setActiveIndex(results.length > 0 ? 0 : -1);
   }, [results]);
 
-  // Load org contacts when dialog opens
   useEffect(() => {
     if (open) {
       setQuery("");
-      setResults([]);
-      setScopeRequired(false);
+      setSearchQuery("");
       setActiveIndex(-1);
-      search("");
     }
-  }, [open, search]);
+  }, [open]);
 
   function handleAdd(email: string, name?: string) {
     addPerson.mutate({ email, name });
@@ -145,7 +144,10 @@ export function PeopleSearchDialog({
       }
       // Otherwise, try adding as a typed email
       const trimmed = query.trim();
-      if (EMAIL_REGEX.test(trimmed) && !overlayEmails.has(trimmed)) {
+      if (
+        EMAIL_REGEX.test(trimmed) &&
+        !overlayEmails.has(trimmed.toLowerCase())
+      ) {
         handleAdd(trimmed);
         setQuery("");
       }
@@ -154,7 +156,7 @@ export function PeopleSearchDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[440px] gap-0 p-0">
+      <DialogContent className="sm:max-w-[440px] max-h-[calc(85vh-1rem)] gap-0 overflow-y-auto p-0 top-[15vh] !translate-y-0">
         <DialogHeader className="px-4 pt-4 pb-0">
           <DialogTitle className="text-base">
             {t("eventForm.people")}
@@ -165,7 +167,6 @@ export function PeopleSearchDialog({
         <div className="relative px-4 pt-3 pb-2">
           <IconSearch className="absolute left-7 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <input
-            ref={inputRef}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyDown}
@@ -185,7 +186,9 @@ export function PeopleSearchDialog({
             className="max-h-48 overflow-y-auto border-t border-border"
           >
             {results.map((person) => {
-              const alreadyAdded = overlayEmails.has(person.email);
+              const alreadyAdded = overlayEmails.has(
+                person.email.toLowerCase(),
+              );
               const selectableIdx = selectableResults.indexOf(person);
               const isActive = !alreadyAdded && selectableIdx === activeIndex;
               return (

package/corpus/templates/calendar/app/components/calendar/WeekView.tsx

@@ -367,7 +367,7 @@ const WeekEventCard = memo(function WeekEventCard({
       style={{
         ...style,
         left: `calc(${li.left}% + ${li.indent}px)`,
-        width: `calc(${li.width}% - ${li.indent * 2 + 2}px)`,
+        width: `calc(${li.width}% - ${li.indent + 2}px)`,
         zIndex:
           isBeingDragged && isDragging
             ? 100

package/corpus/templates/calendar/app/components/layout/AppLayout.tsx

@@ -272,7 +272,10 @@ export function AppLayout({ children }: AppLayoutProps) {
 
   useEffect(() => {
     if (!hasAccounts) return;
-    void prefetchPeopleContacts(queryClient);
+    void Promise.all([
+      prefetchPeopleContacts(queryClient),
+      prefetchPeopleContacts(queryClient, "directory"),
+    ]);
   }, [hasAccounts, queryClient]);
 
   useEffect(() => {