🤖 feat: sub-workspaces as subagents

Signed-off-by: Thomas Kosiewski <tk@coder.com>

---
_Generated with `codex cli` • Model: `gpt-5.2` • Thinking: `xhigh`_
<!-- mux-attribution: model=gpt-5.2 thinking=xhigh -->

Change-Id: I8b9f052ecf68308e29944aa1cdbe5b8eafff4479

Author: ThomasK33

src/browser/components/ProjectSidebar.tsx

@@ -17,6 +17,7 @@ import {
   partitionWorkspacesByAge,
   formatDaysThreshold,
   AGE_THRESHOLDS_DAYS,
+  computeWorkspaceDepthMap,
 } from "@/browser/utils/ui/workspaceFiltering";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import SecretsModal from "./SecretsModal";
@@ -608,6 +609,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             {(() => {
                               const allWorkspaces =
                                 sortedWorkspacesByProject.get(projectPath) ?? [];
+                              const depthByWorkspaceId = computeWorkspaceDepthMap(allWorkspaces);
                               const { recent, buckets } = partitionWorkspacesByAge(
                                 allWorkspaces,
                                 workspaceRecency
@@ -625,6 +627,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                   onSelectWorkspace={handleSelectWorkspace}
                                   onRemoveWorkspace={handleRemoveWorkspace}
                                   onToggleUnread={_onToggleUnread}
+                                  depth={depthByWorkspaceId[metadata.id] ?? 0}
                                 />
                               );
 

src/browser/components/Settings/SettingsModal.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { Settings, Key, Cpu, X, Briefcase, FlaskConical } from "lucide-react";
+import { Settings, Key, Cpu, X, Briefcase, FlaskConical, Bot } from "lucide-react";
 import { useSettings } from "@/browser/contexts/SettingsContext";
 import { Dialog, DialogContent, DialogTitle, VisuallyHidden } from "@/browser/components/ui/dialog";
 import { GeneralSection } from "./sections/GeneralSection";
+import { TasksSection } from "./sections/TasksSection";
 import { ProvidersSection } from "./sections/ProvidersSection";
 import { ModelsSection } from "./sections/ModelsSection";
 import { Button } from "@/browser/components/ui/button";
@@ -17,6 +18,12 @@ const SECTIONS: SettingsSection[] = [
     icon: <Settings className="h-4 w-4" />,
     component: GeneralSection,
   },
+  {
+    id: "tasks",
+    label: "Tasks",
+    icon: <Bot className="h-4 w-4" />,
+    component: TasksSection,
+  },
   {
     id: "providers",
     label: "Providers",

src/browser/components/Settings/sections/TasksSection.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useAPI } from "@/browser/contexts/API";
+import { Input } from "@/browser/components/ui/input";
+import {
+  DEFAULT_TASK_SETTINGS,
+  TASK_SETTINGS_LIMITS,
+  normalizeTaskSettings,
+  type TaskSettings,
+} from "@/common/types/tasks";
+
+export function TasksSection() {
+  const { api } = useAPI();
+  const [settings, setSettings] = useState<TaskSettings>(DEFAULT_TASK_SETTINGS);
+  const [loaded, setLoaded] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const savingRef = useRef(false);
+
+  useEffect(() => {
+    if (!api) return;
+
+    setLoaded(false);
+    setSaveError(null);
+
+    void api.config
+      .getConfig()
+      .then((cfg) => {
+        setSettings(normalizeTaskSettings(cfg.taskSettings));
+        setLoaded(true);
+      })
+      .catch((error: unknown) => {
+        setSaveError(error instanceof Error ? error.message : String(error));
+        setLoaded(true);
+      });
+  }, [api]);
+
+  useEffect(() => {
+    if (!api) return;
+    if (!loaded) return;
+    if (savingRef.current) return;
+
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+
+    saveTimerRef.current = setTimeout(() => {
+      savingRef.current = true;
+      void api.config
+        .saveConfig({ taskSettings: settings })
+        .catch((error: unknown) => {
+          setSaveError(error instanceof Error ? error.message : String(error));
+        })
+        .finally(() => {
+          savingRef.current = false;
+        });
+    }, 400);
+
+    return () => {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    };
+  }, [api, loaded, settings]);
+
+  const setMaxParallelAgentTasks = (rawValue: string) => {
+    const parsed = Number(rawValue);
+    setSettings((prev) =>
+      normalizeTaskSettings({ ...prev, maxParallelAgentTasks: parsed })
+    );
+  };
+
+  const setMaxTaskNestingDepth = (rawValue: string) => {
+    const parsed = Number(rawValue);
+    setSettings((prev) => normalizeTaskSettings({ ...prev, maxTaskNestingDepth: parsed }));
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-foreground mb-4 text-sm font-medium">Tasks</h3>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex-1">
+              <div className="text-foreground text-sm">Max Parallel Agent Tasks</div>
+              <div className="text-muted text-xs">
+                Default {TASK_SETTINGS_LIMITS.maxParallelAgentTasks.default}, range{" "}
+                {TASK_SETTINGS_LIMITS.maxParallelAgentTasks.min}–
+                {TASK_SETTINGS_LIMITS.maxParallelAgentTasks.max}
+              </div>
+            </div>
+            <Input
+              type="number"
+              value={settings.maxParallelAgentTasks}
+              min={TASK_SETTINGS_LIMITS.maxParallelAgentTasks.min}
+              max={TASK_SETTINGS_LIMITS.maxParallelAgentTasks.max}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setMaxParallelAgentTasks(e.target.value)
+              }
+              className="border-border-medium bg-background-secondary h-9 w-28"
+            />
+          </div>
+
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex-1">
+              <div className="text-foreground text-sm">Max Task Nesting Depth</div>
+              <div className="text-muted text-xs">
+                Default {TASK_SETTINGS_LIMITS.maxTaskNestingDepth.default}, range{" "}
+                {TASK_SETTINGS_LIMITS.maxTaskNestingDepth.min}–
+                {TASK_SETTINGS_LIMITS.maxTaskNestingDepth.max}
+              </div>
+            </div>
+            <Input
+              type="number"
+              value={settings.maxTaskNestingDepth}
+              min={TASK_SETTINGS_LIMITS.maxTaskNestingDepth.min}
+              max={TASK_SETTINGS_LIMITS.maxTaskNestingDepth.max}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setMaxTaskNestingDepth(e.target.value)
+              }
+              className="border-border-medium bg-background-secondary h-9 w-28"
+            />
+          </div>
+        </div>
+
+        {saveError && <div className="text-danger-light mt-4 text-xs">{saveError}</div>}
+      </div>
+    </div>
+  );
+}
+

src/browser/components/WorkspaceListItem.tsx

@@ -23,6 +23,7 @@ export interface WorkspaceListItemProps {
   projectName: string;
   isSelected: boolean;
   isDeleting?: boolean;
+  depth?: number;
   /** @deprecated No longer used since status dot was removed, kept for API compatibility */
   lastReadTimestamp?: number;
   // Event handlers
@@ -38,6 +39,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
   projectName,
   isSelected,
   isDeleting,
+  depth,
   lastReadTimestamp: _lastReadTimestamp,
   onSelectWorkspace,
   onRemoveWorkspace,
@@ -101,18 +103,21 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
 
   const { canInterrupt, awaitingUserQuestion } = useWorkspaceSidebarState(workspaceId);
   const isWorking = canInterrupt && !awaitingUserQuestion;
+  const safeDepth = typeof depth === "number" && Number.isFinite(depth) ? Math.max(0, depth) : 0;
+  const paddingLeft = 9 + Math.min(32, safeDepth) * 12;
 
   return (
     <React.Fragment>
       <div
         className={cn(
-          "py-1.5 pl-[9px] pr-2 border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative flex gap-2",
+          "py-1.5 pr-2 border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative flex gap-2",
           isDisabled
             ? "cursor-default opacity-70"
             : "cursor-pointer hover:bg-hover [&:hover_button]:opacity-100",
           isSelected && !isDisabled && "bg-hover border-l-blue-400",
           isDeleting && "pointer-events-none"
         )}
+        style={{ paddingLeft }}
         onClick={() => {
           if (isDisabled) return;
           onSelectWorkspace({

src/browser/utils/ui/workspaceFiltering.test.ts

@@ -180,7 +180,8 @@ describe("buildSortedWorkspacesByProject", () => {
   const createWorkspace = (
     id: string,
     projectPath: string,
-    status?: "creating"
+    status?: "creating",
+    parentWorkspaceId?: string
   ): FrontendWorkspaceMetadata => ({
     id,
     name: `workspace-${id}`,
@@ -189,6 +190,7 @@ describe("buildSortedWorkspacesByProject", () => {
     namedWorkspacePath: `${projectPath}/workspace-${id}`,
     runtimeConfig: DEFAULT_RUNTIME_CONFIG,
     status,
+    parentWorkspaceId,
   });
 
   it("should include workspaces from persisted config", () => {
@@ -276,6 +278,41 @@ describe("buildSortedWorkspacesByProject", () => {
     expect(result.get("/project/a")?.map((w) => w.id)).toEqual(["ws2", "ws3", "ws1"]);
   });
 
+  it("should flatten child workspaces directly under their parent", () => {
+    const now = Date.now();
+    const projects = new Map<string, ProjectConfig>([
+      [
+        "/project/a",
+        {
+          workspaces: [
+            { path: "/a/root", id: "root" },
+            { path: "/a/child1", id: "child1" },
+            { path: "/a/child2", id: "child2" },
+            { path: "/a/grand", id: "grand" },
+          ],
+        },
+      ],
+    ]);
+
+    const metadata = new Map<string, FrontendWorkspaceMetadata>([
+      ["root", createWorkspace("root", "/project/a")],
+      ["child1", createWorkspace("child1", "/project/a", undefined, "root")],
+      ["child2", createWorkspace("child2", "/project/a", undefined, "root")],
+      ["grand", createWorkspace("grand", "/project/a", undefined, "child1")],
+    ]);
+
+    // Child workspaces are more recent than the parent, but should still render below it.
+    const recency = {
+      child1: now - 1000,
+      child2: now - 2000,
+      grand: now - 3000,
+      root: now - 4000,
+    };
+
+    const result = buildSortedWorkspacesByProject(projects, metadata, recency);
+    expect(result.get("/project/a")?.map((w) => w.id)).toEqual(["root", "child1", "grand", "child2"]);
+  });
+
   it("should not duplicate workspaces that exist in both config and have creating status", () => {
     // Edge case: workspace was saved to config but still has status: "creating"
     // (this shouldn't happen in practice but tests defensive coding)

src/browser/utils/ui/workspaceFiltering.ts

@@ -1,6 +1,105 @@
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import type { ProjectConfig } from "@/common/types/project";
 
+export function flattenWorkspaceTree(
+  workspaces: FrontendWorkspaceMetadata[]
+): FrontendWorkspaceMetadata[] {
+  if (workspaces.length === 0) return [];
+
+  const byId = new Map<string, FrontendWorkspaceMetadata>();
+  for (const workspace of workspaces) {
+    byId.set(workspace.id, workspace);
+  }
+
+  const childrenByParent = new Map<string, FrontendWorkspaceMetadata[]>();
+  const roots: FrontendWorkspaceMetadata[] = [];
+
+  // Preserve input order for both roots and siblings by iterating in-order.
+  for (const workspace of workspaces) {
+    const parentId = workspace.parentWorkspaceId;
+    if (parentId && byId.has(parentId)) {
+      const children = childrenByParent.get(parentId) ?? [];
+      children.push(workspace);
+      childrenByParent.set(parentId, children);
+    } else {
+      roots.push(workspace);
+    }
+  }
+
+  const result: FrontendWorkspaceMetadata[] = [];
+  const visited = new Set<string>();
+
+  const visit = (workspace: FrontendWorkspaceMetadata, depth: number) => {
+    if (visited.has(workspace.id)) return;
+    visited.add(workspace.id);
+
+    // Cap depth defensively to avoid pathological cycles/graphs.
+    if (depth > 32) {
+      result.push(workspace);
+      return;
+    }
+
+    result.push(workspace);
+    const children = childrenByParent.get(workspace.id);
+    if (children) {
+      for (const child of children) {
+        visit(child, depth + 1);
+      }
+    }
+  };
+
+  for (const root of roots) {
+    visit(root, 0);
+  }
+
+  // Fallback: ensure we include any remaining nodes (cycles, missing parents, etc.).
+  for (const workspace of workspaces) {
+    if (!visited.has(workspace.id)) {
+      visit(workspace, 0);
+    }
+  }
+
+  return result;
+}
+
+export function computeWorkspaceDepthMap(
+  workspaces: FrontendWorkspaceMetadata[]
+): Record<string, number> {
+  const byId = new Map<string, FrontendWorkspaceMetadata>();
+  for (const workspace of workspaces) {
+    byId.set(workspace.id, workspace);
+  }
+
+  const depths = new Map<string, number>();
+  const visiting = new Set<string>();
+
+  const computeDepth = (workspaceId: string): number => {
+    const existing = depths.get(workspaceId);
+    if (existing !== undefined) return existing;
+
+    if (visiting.has(workspaceId)) {
+      // Cycle detected - treat as root.
+      return 0;
+    }
+
+    visiting.add(workspaceId);
+    const workspace = byId.get(workspaceId);
+    const parentId = workspace?.parentWorkspaceId;
+    const depth =
+      parentId && byId.has(parentId) ? Math.min(computeDepth(parentId) + 1, 32) : 0;
+    visiting.delete(workspaceId);
+
+    depths.set(workspaceId, depth);
+    return depth;
+  };
+
+  for (const workspace of workspaces) {
+    computeDepth(workspace.id);
+  }
+
+  return Object.fromEntries(depths);
+}
+
 /**
  * Age thresholds for workspace filtering, in ascending order.
  * Each tier hides workspaces older than the specified duration.
@@ -57,6 +156,11 @@ export function buildSortedWorkspacesByProject(
     });
   }
 
+  // Ensure child workspaces appear directly below their parents.
+  for (const [projectPath, metadataList] of result) {
+    result.set(projectPath, flattenWorkspaceTree(metadataList));
+  }
+
   return result;
 }