@mndrk/agx 2.4.6 → 2.4.7

package/cloud-runtime/standalone/apps/local/components/projects/ObjectiveScheduledTasksPanel.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Check, Clock, Pause, Pencil, Play, Plus, Terminal, Trash2, XCircle } from "lucide-react";
 import { usePromptJobs } from "@/hooks/usePromptJobs";
+import { isScheduledRunOverdue } from "@/src/scheduling/status";
 import { cronToHuman } from "@/src/graph/nl-schedule";
 import type { PromptJob, PromptRun } from "@/src/prompt-scheduler/types";
 import {
@@ -30,16 +31,12 @@ function formatCadence(job: Pick<PromptJob, "cadence" | "cronExpr">): string {
   return cronToHuman(job.cronExpr || source) ?? source;
 }
 
-function isJobOverdue(job: Pick<PromptJob, "nextRunAt" | "lastRunAt" | "prevScheduledAt" | "state">): boolean {
-  if (job.state !== "active") return false;
-  if (job.nextRunAt !== null && job.nextRunAt - Date.now() < 0) {
-    if (job.lastRunAt && job.lastRunAt >= job.nextRunAt) return false;
-    return true;
-  }
-  if (job.prevScheduledAt && job.lastRunAt) {
-    return job.lastRunAt > job.prevScheduledAt + 5 * 60_000;
-  }
-  return false;
+function isJobOverdue(job: Pick<PromptJob, "nextRunAt" | "lastRunAt" | "state">): boolean {
+  return isScheduledRunOverdue({
+    state: job.state,
+    nextScheduledAt: job.nextRunAt,
+    lastCompletedAt: job.lastRunAt,
+  });
 }
 
 function formatNextRun(epochMs: number | null, state: PromptJob["state"]): string {

package/cloud-runtime/standalone/apps/local/components/projects/ProjectHome.tsx

@@ -22,10 +22,7 @@ interface ProjectHomeProps {
 export function ProjectHome({
   projectId,
   projectSlug,
-  projectName,
   projectDescription,
-  projectMetadata,
-  repos,
   threadIds,
 }: ProjectHomeProps) {
   const router = useRouter();
@@ -77,7 +74,10 @@ export function ProjectHome({
 
         {/* Project context — no label */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <FoldersSummaryCard projectId={projectId} repos={repos} />
+          <FoldersSummaryCard
+            projectId={projectId}
+            onViewAll={() => router.push(`/projects/${projectSlug}/folders`)}
+          />
           <TeamsSummaryCard
             projectId={projectId}
             onViewAll={() => router.push(`/projects/${projectSlug}/teams`)}

package/cloud-runtime/standalone/apps/local/components/projects/ProjectObjectivesWorkspace.tsx

@@ -1705,6 +1705,10 @@ export function ProjectObjectiveDetail({
   const [availableTrackers, setAvailableTrackers] = useState<{ type: string; displayName: string }[]>([]);
   const [defaultTrackerType, setDefaultTrackerType] = useState<string | null>(null);
   const [workingOnObjective, setWorkingOnObjective] = useState(false);
+  const [programContent, setProgramContent] = useState<string | null>(null);
+  const [programPath, setProgramPath] = useState<string | null>(null);
+  const [programDraft, setProgramDraft] = useState<string | null>(null);
+  const [isSavingProgram, setIsSavingProgram] = useState(false);
   const detailScrollRef = useRef<HTMLDivElement | null>(null);
   const [showBackToTop, setShowBackToTop] = useState(false);
 
@@ -1788,6 +1792,49 @@ export function ProjectObjectiveDetail({
     fetchNotes();
   }, [fetchNotes]);
 
+  const fetchProgram = useCallback(async () => {
+    if (!project?.id || !objective?.id) return;
+    try {
+      const res = await fetch(
+        `/api/projects/${project.id}/objectives/${objective.id}/program`,
+      );
+      if (res.ok) {
+        const data = await res.json();
+        setProgramContent(data.program?.content ?? null);
+        setProgramPath(data.program?.path ?? null);
+      }
+    } catch {
+      // Silently fail — panel will show empty state
+    }
+  }, [project?.id, objective?.id]);
+
+  useEffect(() => {
+    fetchProgram();
+  }, [fetchProgram]);
+
+  const saveProgram = useCallback(async () => {
+    if (!project?.id || !objective?.id || programDraft === null) return;
+    setIsSavingProgram(true);
+    try {
+      const res = await fetch(
+        `/api/projects/${project.id}/objectives/${objective.id}/program`,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ content: programDraft }),
+        },
+      );
+      if (res.ok) {
+        const data = await res.json();
+        setProgramContent(data.program?.content ?? null);
+        setProgramPath(data.program?.path ?? null);
+        setProgramDraft(null);
+      }
+    } finally {
+      setIsSavingProgram(false);
+    }
+  }, [project?.id, objective?.id, programDraft]);
+
   // Refetch when switching to notes tab (in case notes changed elsewhere)
   useEffect(() => {
     if (activeTab === "notes") {
@@ -2307,6 +2354,77 @@ export function ProjectObjectiveDetail({
 
               </div>
 
+              {/* Program — objective-level prompt (goal / definition of better / blast radius) */}
+              <div className="mb-6 rounded-xl border border-[var(--border)] bg-[var(--card-bg)]">
+                <div className="flex items-center justify-between border-b border-[var(--border)] px-4 py-2.5">
+                  <div className="flex items-center gap-2">
+                    <FileText size={14} className="text-[var(--muted-foreground)]" />
+                    <span className="text-xs font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
+                      Program
+                    </span>
+                    {programPath ? (
+                      <span className="font-mono text-[10px] text-[var(--muted-foreground)] opacity-70">
+                        {programPath.replace(/^.*\/\.agx\//, "~/.agx/")}
+                      </span>
+                    ) : null}
+                  </div>
+                  {programDraft === null ? (
+                    <button
+                      type="button"
+                      onClick={() => setProgramDraft(programContent ?? "")}
+                      className="rounded-md p-1 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                      aria-label="Edit program"
+                    >
+                      <Pencil size={14} />
+                    </button>
+                  ) : (
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        onClick={() => void saveProgram()}
+                        disabled={isSavingProgram}
+                        className="rounded-md p-1 text-[var(--primary)] transition-colors hover:bg-[var(--status-in-progress-bg)] disabled:opacity-50"
+                        aria-label="Save program"
+                      >
+                        <Check size={14} />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setProgramDraft(null)}
+                        className="rounded-md p-1 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--muted)]"
+                        aria-label="Cancel editing"
+                      >
+                        <X size={14} />
+                      </button>
+                    </div>
+                  )}
+                </div>
+                <div className="px-4 py-3">
+                  {programDraft !== null ? (
+                    <textarea
+                      autoFocus
+                      value={programDraft}
+                      onChange={(e) => setProgramDraft(e.target.value)}
+                      rows={8}
+                      placeholder={
+                        "Goal: why this exists\n\nDefinition of better: the metric or signal that says we're done\n\nBlast radius: paths/systems in scope, what's off-limits\n\nNotes: things we've learned"
+                      }
+                      className="w-full resize-y rounded-md border border-[var(--border)] bg-[var(--background)] px-3 py-2 font-mono text-xs text-[var(--foreground)] outline-none focus:border-[var(--primary)]"
+                    />
+                  ) : programContent && programContent.trim().length > 0 ? (
+                    <div className="prose prose-sm max-w-none text-sm text-[var(--foreground)]">
+                      <Markdown content={programContent} />
+                    </div>
+                  ) : (
+                    <p className="text-sm text-[var(--muted-foreground)]">
+                      No program yet. Define what <em>better</em> looks like for this
+                      objective — the metric, the scope, any constraints. Agents read this
+                      before every run, and will ask for it in chat if it&apos;s missing.
+                    </p>
+                  )}
+                </div>
+              </div>
+
               {/* Work on objective */}
               <div className="mb-6">
                 <button

package/cloud-runtime/standalone/apps/local/components/projects/ProjectSettings.tsx

@@ -1,16 +1,15 @@
 "use client";
 
+import type { ChangeEvent } from "react";
 import { useCallback, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
-  Settings,
   FolderGit2,
   Download,
   Upload,
   Trash2,
   AlertTriangle,
   Plus,
-  X,
 } from "lucide-react";
 import type { ProjectWithAgents, ProjectRepoInput } from "@/hooks/useProjects";
 
@@ -106,15 +105,17 @@ export function ProjectSettings({ project, onUpdate, onDelete }: ProjectSettings
   );
 
   // --- Team Config ---
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const teamFileInputRef = useRef<HTMLInputElement>(null);
   const [teamStatus, setTeamStatus] = useState<string | null>(null);
+  const workspaceFileInputRef = useRef<HTMLInputElement>(null);
+  const [workspaceStatus, setWorkspaceStatus] = useState<string | null>(null);
 
   const handleExportYaml = useCallback(() => {
     window.open(`/api/projects/${project.id}/teams/export`, "_blank");
   }, [project.id]);
 
   const handleImportYaml = useCallback(
-    async (e: React.ChangeEvent<HTMLInputElement>) => {
+    async (e: ChangeEvent<HTMLInputElement>) => {
       const file = e.target.files?.[0];
       if (!file) return;
 
@@ -137,12 +138,46 @@ export function ProjectSettings({ project, onUpdate, onDelete }: ProjectSettings
       }
 
       // Reset file input
-      if (fileInputRef.current) fileInputRef.current.value = "";
+      if (teamFileInputRef.current) teamFileInputRef.current.value = "";
       setTimeout(() => setTeamStatus(null), 4000);
     },
     [project.id],
   );
 
+  const handleExportWorkspaceYaml = useCallback(() => {
+    window.open(`/api/projects/${project.id}/workspace/export`, "_blank");
+  }, [project.id]);
+
+  const handleImportWorkspaceYaml = useCallback(
+    async (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+
+      try {
+        const content = await file.text();
+        const res = await fetch(`/api/projects/${project.id}/workspace/import`, {
+          method: "POST",
+          headers: { "Content-Type": "application/x-yaml" },
+          body: content,
+        });
+
+        if (res.ok) {
+          setWorkspaceStatus("Import successful");
+          router.refresh();
+        } else {
+          const body = await res.json().catch(() => ({}));
+          setWorkspaceStatus(`Import failed: ${body.error || res.statusText}`);
+        }
+      } catch {
+        setWorkspaceStatus("Import failed");
+      }
+
+      if (workspaceFileInputRef.current) workspaceFileInputRef.current.value = "";
+      setTimeout(() => setWorkspaceStatus(null), 4000);
+    },
+    [project.id, router],
+  );
+
   // --- Danger Zone ---
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [deleting, setDeleting] = useState(false);
@@ -309,7 +344,7 @@ export function ProjectSettings({ project, onUpdate, onDelete }: ProjectSettings
               <Upload className="w-4 h-4" />
               Import YAML
               <input
-                ref={fileInputRef}
+                ref={teamFileInputRef}
                 type="file"
                 accept=".yaml,.yml"
                 onChange={handleImportYaml}
@@ -319,7 +354,46 @@ export function ProjectSettings({ project, onUpdate, onDelete }: ProjectSettings
           </div>
         </section>
 
-        {/* Section 4: Danger Zone */}
+        {/* Section 4: Workspace Map YAML */}
+        <section className="rounded-2xl border border-zinc-800 bg-zinc-900/50 p-6 space-y-4">
+          <div className="flex items-center justify-between border-b border-zinc-800 pb-3">
+            <h2 className="text-sm font-bold uppercase tracking-widest text-zinc-400">
+              Workspace Map YAML
+            </h2>
+            {workspaceStatus && (
+              <span className="text-xs text-zinc-500">{workspaceStatus}</span>
+            )}
+          </div>
+
+          <p className="text-sm text-zinc-500">
+            Export the portable workspace map structure without local paths, or import a shared YAML skeleton that
+            teammates can map on this machine.
+          </p>
+
+          <div className="flex items-center gap-3">
+            <button
+              onClick={handleExportWorkspaceYaml}
+              className="flex items-center gap-2 px-4 py-2 rounded-xl border border-zinc-700 bg-zinc-800/50 hover:bg-zinc-800 transition-colors text-sm text-zinc-300"
+            >
+              <Download className="w-4 h-4" />
+              Export YAML
+            </button>
+
+            <label className="flex items-center gap-2 px-4 py-2 rounded-xl border border-zinc-700 bg-zinc-800/50 hover:bg-zinc-800 transition-colors text-sm text-zinc-300 cursor-pointer">
+              <Upload className="w-4 h-4" />
+              Import YAML
+              <input
+                ref={workspaceFileInputRef}
+                type="file"
+                accept=".yaml,.yml"
+                onChange={handleImportWorkspaceYaml}
+                className="hidden"
+              />
+            </label>
+          </div>
+        </section>
+
+        {/* Section 5: Danger Zone */}
         <section className="rounded-2xl border border-red-900/50 bg-zinc-900/50 p-6 space-y-4">
           <div className="flex items-center gap-2 border-b border-red-900/30 pb-3">
             <AlertTriangle className="w-4 h-4 text-red-500" />

package/cloud-runtime/standalone/apps/local/components/thread/WorkspaceSidebar.tsx

@@ -832,7 +832,7 @@ export function WorkspaceSidebar({
               </RailTooltip>
             )}
             {stageShow.folders && (
-              <RailTooltip label="Folders">
+              <RailTooltip label="Workspace Map">
                 <Link href={`/projects/${collapsedSlug}/folders`} className={`workspace-sidebar__rail-icon${activeProjectView === "folders" ? " workspace-sidebar__rail-icon--active" : ""}`}>
                   <FolderGit2 size={16} />
                 </Link>
@@ -1098,7 +1098,17 @@ export function WorkspaceSidebar({
                           </span>
                         )}
                       </button>
-                    ) : null}
+                    ) : (
+                      <Link
+                        href={`/projects/${selectedProject.slug}/thread`}
+                        onClick={closeTouchDrawer}
+                        className={`workspace-sidebar__nav-item ${isActiveProjectThread ? "workspace-sidebar__nav-item--active" : ""}`}
+                        aria-current={isActiveProjectThread ? "page" : undefined}
+                      >
+                        <MessageSquare size={14} className="flex-shrink-0 text-[var(--muted-foreground)]" />
+                        <span className="workspace-sidebar__workspace-title text-sm">Chat</span>
+                      </Link>
+                    )}
                   </div>
                 </div>
               </div>
@@ -1132,7 +1142,7 @@ export function WorkspaceSidebar({
                           aria-current={isActiveProjectFolders ? "page" : undefined}
                         >
                           <FolderGit2 size={14} className="flex-shrink-0 text-[var(--muted-foreground)]" />
-                          <span className="workspace-sidebar__workspace-title text-sm">Folders</span>
+                          <span className="workspace-sidebar__workspace-title text-sm">Workspace Map</span>
                         </Link>
                       </div>
                     )}

package/cloud-runtime/standalone/apps/local/hooks/useProjectWorkspace.ts

@@ -0,0 +1,117 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { WorkspaceEntry } from "@/lib/db/types";
+import type { ProjectWorkspace } from "@/lib/project-workspace";
+import { countWorkspaceEntries } from "@/lib/project-workspace";
+
+interface CreateWorkspaceEntryInput {
+  category: string;
+  name: string;
+  path?: string | null;
+  purpose?: string | null;
+}
+
+interface UpdateWorkspaceEntryInput {
+  name?: string;
+  path?: string | null;
+  purpose?: string | null;
+  sort_order?: number;
+}
+
+async function readErrorMessage(response: Response, fallback: string): Promise<string> {
+  const body = await response.json().catch(() => ({}));
+  return typeof body.error === "string" ? body.error : fallback;
+}
+
+export function useProjectWorkspace(projectId: string) {
+  const [workspace, setWorkspace] = useState<ProjectWorkspace>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchWorkspace = useCallback(async () => {
+    if (!projectId) {
+      setWorkspace({});
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const response = await fetch(`/api/projects/${projectId}/workspace`);
+      if (!response.ok) {
+        throw new Error(await readErrorMessage(response, "Failed to fetch workspace map"));
+      }
+      const data = await response.json();
+      setWorkspace(data.workspace ?? {});
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    void fetchWorkspace();
+  }, [fetchWorkspace]);
+
+  const createEntry = useCallback(
+    async (input: CreateWorkspaceEntryInput) => {
+      const response = await fetch(`/api/projects/${projectId}/workspace`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(input),
+      });
+      if (!response.ok) {
+        throw new Error(await readErrorMessage(response, "Failed to create workspace entry"));
+      }
+      const data = await response.json();
+      await fetchWorkspace();
+      return data.entry as WorkspaceEntry;
+    },
+    [fetchWorkspace, projectId],
+  );
+
+  const updateEntry = useCallback(
+    async (entryId: string, updates: UpdateWorkspaceEntryInput) => {
+      const response = await fetch(`/api/projects/${projectId}/workspace/${entryId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(updates),
+      });
+      if (!response.ok) {
+        throw new Error(await readErrorMessage(response, "Failed to update workspace entry"));
+      }
+      const data = await response.json();
+      await fetchWorkspace();
+      return data.entry as WorkspaceEntry;
+    },
+    [fetchWorkspace, projectId],
+  );
+
+  const deleteEntry = useCallback(
+    async (entryId: string) => {
+      const response = await fetch(`/api/projects/${projectId}/workspace/${entryId}`, {
+        method: "DELETE",
+      });
+      if (!response.ok) {
+        throw new Error(await readErrorMessage(response, "Failed to delete workspace entry"));
+      }
+      await fetchWorkspace();
+    },
+    [fetchWorkspace, projectId],
+  );
+
+  return {
+    workspace,
+    entryCount: countWorkspaceEntries(workspace),
+    isLoading,
+    error,
+    refetch: fetchWorkspace,
+    createEntry,
+    updateEntry,
+    deleteEntry,
+  };
+}

package/cloud-runtime/standalone/apps/local/lib/db/projects.ts

@@ -582,6 +582,15 @@ export async function getProjectForThread(threadId: string): Promise<string | nu
 }
 
 export async function getProjectWorkspace(projectId: string): Promise<Record<string, WorkspaceEntry[]>> {
+  const entries = await getProjectWorkspaceEntries(projectId);
+  return entries.reduce<Record<string, WorkspaceEntry[]>>((acc, entry) => {
+    if (!acc[entry.category]) acc[entry.category] = [];
+    acc[entry.category].push(entry);
+    return acc;
+  }, {});
+}
+
+export async function getProjectWorkspaceEntries(projectId: string): Promise<WorkspaceEntry[]> {
   const db = createAdminDbClient();
   const { data, error } = await db
     .from("workspace_entries")
@@ -592,20 +601,15 @@ export async function getProjectWorkspace(projectId: string): Promise<Record<str
     .order("name", { ascending: true });
 
   if (error) {
-    if (isMissingRelationError(error, "workspace_entries")) return {};
+    if (isMissingRelationError(error, "workspace_entries")) return [];
     throw error;
   }
-  const entries = (data || []) as WorkspaceEntry[];
-  return entries.reduce<Record<string, WorkspaceEntry[]>>((acc, entry) => {
-    if (!acc[entry.category]) acc[entry.category] = [];
-    acc[entry.category].push(entry);
-    return acc;
-  }, {});
+  return (data || []) as WorkspaceEntry[];
 }
 
 export async function createWorkspaceEntry(
   projectId: string,
-  entry: { category: string; name: string; path?: string; purpose?: string }
+  entry: { category: string; name: string; path?: string | null; purpose?: string | null; sort_order?: number }
 ): Promise<WorkspaceEntry> {
   const db = createAdminDbClient();
   const id = randomUUID();
@@ -619,7 +623,7 @@ export async function createWorkspaceEntry(
       name: entry.name,
       path: entry.path || null,
       purpose: entry.purpose || null,
-      sort_order: 0,
+      sort_order: entry.sort_order ?? 0,
       created_at: now,
       updated_at: now,
     })
@@ -641,6 +645,7 @@ export async function updateWorkspaceEntry(
   if (updates.path !== undefined) payload.path = updates.path;
   if (updates.purpose !== undefined) payload.purpose = updates.purpose;
   if (updates.sort_order !== undefined) payload.sort_order = updates.sort_order;
+  payload.updated_at = new Date().toISOString();
 
   const { data, error } = await db
     .from("workspace_entries")
@@ -689,4 +694,3 @@ export async function getWorkspaceMapForContext(
     purpose: (row.purpose as string) || null,
   }));
 }
-

package/cloud-runtime/standalone/apps/local/lib/project-workspace.ts

@@ -0,0 +1,80 @@
+import type { WorkspaceEntry } from "@/lib/db/types";
+import {
+  DEFAULT_WORKSPACE_CATEGORIES,
+  getWorkspaceCategory,
+  WORKSPACE_CATEGORY_IDS,
+} from "@/lib/workspace-categories";
+
+export type ProjectWorkspace = Record<string, WorkspaceEntry[]>;
+
+export interface WorkspaceCategoryGroup {
+  id: string;
+  label: string;
+  entries: WorkspaceEntry[];
+  isPreset: boolean;
+  isEmpty: boolean;
+}
+
+export function isPresetWorkspaceCategory(category: string): boolean {
+  return WORKSPACE_CATEGORY_IDS.includes(category as (typeof WORKSPACE_CATEGORY_IDS)[number]);
+}
+
+export function formatWorkspaceCategoryLabel(category: string): string {
+  const trimmed = category.trim();
+  const preset = trimmed ? getWorkspaceCategory(trimmed as (typeof WORKSPACE_CATEGORY_IDS)[number]) : null;
+  if (preset) return preset.label;
+  if (!trimmed) return "Custom";
+
+  return trimmed
+    .replace(/[_-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function sortEntries(entries: WorkspaceEntry[]): WorkspaceEntry[] {
+  return [...entries].sort((left, right) => {
+    if (left.sort_order !== right.sort_order) {
+      return left.sort_order - right.sort_order;
+    }
+    return left.name.localeCompare(right.name);
+  });
+}
+
+export function countWorkspaceEntries(workspace: ProjectWorkspace): number {
+  return Object.values(workspace).reduce((total, entries) => total + entries.length, 0);
+}
+
+export function buildWorkspaceCategoryGroups(
+  workspace: ProjectWorkspace,
+  extraCategories: string[] = [],
+): WorkspaceCategoryGroup[] {
+  const presetGroups: WorkspaceCategoryGroup[] = DEFAULT_WORKSPACE_CATEGORIES.map((category) => {
+    const entries = sortEntries(workspace[category.id] ?? []);
+    return {
+      id: category.id,
+      label: category.label,
+      entries,
+      isPreset: true,
+      isEmpty: entries.length === 0,
+    };
+  });
+
+  const customCategoryIds = [...new Set([...Object.keys(workspace), ...extraCategories])]
+    .map((category) => category.trim())
+    .filter((category) => category.length > 0)
+    .filter((category) => !isPresetWorkspaceCategory(category))
+    .sort((left, right) => formatWorkspaceCategoryLabel(left).localeCompare(formatWorkspaceCategoryLabel(right)));
+
+  const customGroups: WorkspaceCategoryGroup[] = customCategoryIds.map((category) => {
+    const entries = sortEntries(workspace[category] ?? []);
+    return {
+      id: category,
+      label: formatWorkspaceCategoryLabel(category),
+      entries,
+      isPreset: false,
+      isEmpty: entries.length === 0,
+    };
+  });
+
+  return [...presetGroups, ...customGroups];
+}