feat: add multi-repo UI for task creation and sidebar badge

- TaskInput: "Add repository" button appears when a primary repo is
  selected. Each additional repo gets its own folder picker, mode selector,
  and branch selector. Repos can be removed individually.
- AdditionalRepoRow: new component for per-repo configuration rows
- TaskItem: renders "+N" badge with tooltip listing additional repos
  when a task has multiple repositories
- useTaskCreation: passes additionalRepos through to TaskCreationSaga
- TaskCreationSaga: resolves folders for additional repos and passes
  them as additionalRepos to workspace.create mutation

Generated-By: PostHog Code
Task-Id: 230ec8e6-6781-43b4-ae30-ea24faa410dc

Author: richardsolomou

apps/code/src/renderer/features/sidebar/components/TaskListView.tsx

@@ -107,6 +107,7 @@ function TaskRow({
       isPinned={task.isPinned}
       needsPermission={task.needsPermission}
       taskRunStatus={task.taskRunStatus}
+      additionalRepositories={task.additionalRepositories}
       timestamp={timestamp}
       onClick={onClick}
       onDoubleClick={onDoubleClick}

apps/code/src/renderer/features/sidebar/components/items/TaskItem.tsx

@@ -15,6 +15,11 @@ import { selectIsFocusedOnWorktree, useFocusStore } from "@stores/focusStore";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { SidebarItem } from "../SidebarItem";
 
+interface AdditionalRepo {
+  fullPath: string;
+  name: string;
+}
+
 interface TaskItemProps {
   depth?: number;
   taskId: string;
@@ -35,6 +40,8 @@ interface TaskItemProps {
     | "cancelled";
   timestamp?: number;
   isEditing?: boolean;
+  /** Additional repos for multi-repo tasks (renders +N badge). */
+  additionalRepositories?: AdditionalRepo[];
   onClick: () => void;
   onDoubleClick?: () => void;
   onContextMenu: (e: React.MouseEvent) => void;
@@ -186,6 +193,7 @@ export function TaskItem({
   taskRunStatus,
   timestamp,
   isEditing = false,
+  additionalRepositories,
   onClick,
   onDoubleClick,
   onContextMenu,
@@ -254,6 +262,18 @@ export function TaskItem({
     </span>
   ) : null;
 
+  const multiRepoBadge =
+    additionalRepositories && additionalRepositories.length > 0 ? (
+      <Tooltip
+        content={`Also includes: ${additionalRepositories.map((r) => r.name).join(", ")}`}
+        side="right"
+      >
+        <span className="shrink-0 rounded-sm bg-gray-4 px-1 text-[10px] text-gray-11 group-hover:hidden">
+          +{additionalRepositories.length}
+        </span>
+      </Tooltip>
+    ) : null;
+
   const toolbar =
     onArchive || onTogglePin ? (
       <TaskHoverToolbar
@@ -264,8 +284,9 @@ export function TaskItem({
     ) : null;
 
   const endContent =
-    timestampNode || toolbar ? (
+    timestampNode || multiRepoBadge || toolbar ? (
       <>
+        {multiRepoBadge}
         {timestampNode}
         {toolbar}
       </>

apps/code/src/renderer/features/task-detail/components/AdditionalRepoRow.tsx

@@ -0,0 +1,70 @@
+import { FolderPicker } from "@features/folder-picker/components/FolderPicker";
+import { BranchSelector } from "@features/git-interaction/components/BranchSelector";
+import { useGitQueries } from "@features/git-interaction/hooks/useGitQueries";
+import { X } from "@phosphor-icons/react";
+import { Flex } from "@radix-ui/themes";
+import { type WorkspaceMode, WorkspaceModeSelect } from "./WorkspaceModeSelect";
+
+export interface AdditionalRepoConfig {
+  id: string;
+  directory: string;
+  mode: WorkspaceMode;
+  branch: string | null;
+}
+
+interface AdditionalRepoRowProps {
+  config: AdditionalRepoConfig;
+  onChange: (config: AdditionalRepoConfig) => void;
+  onRemove: () => void;
+  disabled?: boolean;
+}
+
+export function AdditionalRepoRow({
+  config,
+  onChange,
+  onRemove,
+  disabled,
+}: AdditionalRepoRowProps) {
+  const { currentBranch, branchLoading, defaultBranch } = useGitQueries(
+    config.directory,
+  );
+
+  return (
+    <Flex gap="2" align="center" style={{ minWidth: 0, overflow: "hidden" }}>
+      <FolderPicker
+        value={config.directory}
+        onChange={(dir) =>
+          onChange({ ...config, directory: dir, branch: null })
+        }
+        placeholder="Add repository…"
+        size="1"
+      />
+      <WorkspaceModeSelect
+        value={config.mode}
+        onChange={(mode) => onChange({ ...config, mode })}
+        size="1"
+        overrideModes={["worktree", "local"]}
+      />
+      {config.directory && (
+        <BranchSelector
+          repoPath={config.directory}
+          currentBranch={currentBranch}
+          defaultBranch={defaultBranch}
+          disabled={disabled || !config.directory}
+          loading={branchLoading}
+          workspaceMode={config.mode}
+          selectedBranch={config.branch}
+          onBranchSelect={(branch) => onChange({ ...config, branch })}
+        />
+      )}
+      <button
+        type="button"
+        onClick={onRemove}
+        className="flex h-6 w-6 shrink-0 items-center justify-center rounded text-gray-10 transition-colors hover:bg-gray-4 hover:text-gray-12"
+        title="Remove repository"
+      >
+        <X size={12} />
+      </button>
+    </Flex>
+  );
+}

apps/code/src/renderer/features/task-detail/components/TaskInput.tsx

@@ -33,6 +33,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { usePreviewConfig } from "../hooks/usePreviewConfig";
 import { useTaskCreation } from "../hooks/useTaskCreation";
+import {
+  type AdditionalRepoConfig,
+  AdditionalRepoRow,
+} from "./AdditionalRepoRow";
 import { TaskInputEditor } from "./TaskInputEditor";
 import { type WorkspaceMode, WorkspaceModeSelect } from "./WorkspaceModeSelect";
 
@@ -84,6 +88,9 @@ export function TaskInput({
   );
 
   const [selectedDirectory, setSelectedDirectory] = useState("");
+  const [additionalRepos, setAdditionalRepos] = useState<
+    AdditionalRepoConfig[]
+  >([]);
   const workspaceMode = lastUsedWorkspaceMode || "local";
   const adapter = lastUsedAdapter;
 
@@ -275,6 +282,7 @@ export function TaskInput({
       effectiveWorkspaceMode === "cloud" && selectedCloudEnvId
         ? selectedCloudEnvId
         : undefined,
+    additionalRepos: additionalRepos.length > 0 ? additionalRepos : undefined,
   });
 
   const handleCycleMode = useCallback(() => {
@@ -485,6 +493,44 @@ export function TaskInput({
             )}
           </Flex>
 
+          {additionalRepos.map((repo) => (
+            <AdditionalRepoRow
+              key={repo.id}
+              config={repo}
+              onChange={(updated) =>
+                setAdditionalRepos((prev) =>
+                  prev.map((r) => (r.id === repo.id ? updated : r)),
+                )
+              }
+              onRemove={() =>
+                setAdditionalRepos((prev) =>
+                  prev.filter((r) => r.id !== repo.id),
+                )
+              }
+              disabled={isCreatingTask}
+            />
+          ))}
+
+          {workspaceMode !== "cloud" && selectedDirectory && (
+            <button
+              type="button"
+              onClick={() =>
+                setAdditionalRepos((prev) => [
+                  ...prev,
+                  {
+                    id: crypto.randomUUID(),
+                    directory: "",
+                    mode: workspaceMode,
+                    branch: null,
+                  },
+                ])
+              }
+              className="self-start rounded px-2 py-0.5 text-[12px] text-gray-10 transition-colors hover:bg-gray-3 hover:text-gray-12"
+            >
+              + Add repository
+            </button>
+          )}
+
           <TaskInputEditor
             ref={editorRef}
             sessionId={sessionId}

apps/code/src/renderer/features/task-detail/hooks/useTaskCreation.ts

@@ -20,6 +20,12 @@ import type { TaskCreationInput, TaskService } from "../service/service";
 
 const log = logger.scope("task-creation");
 
+interface AdditionalRepoOption {
+  directory: string;
+  mode: WorkspaceMode;
+  branch: string | null;
+}
+
 interface UseTaskCreationOptions {
   editorRef: React.RefObject<MessageEditorHandle | null>;
   selectedDirectory: string;
@@ -34,6 +40,7 @@ interface UseTaskCreationOptions {
   reasoningLevel?: string;
   environmentId?: string | null;
   sandboxEnvironmentId?: string;
+  additionalRepos?: AdditionalRepoOption[];
   onTaskCreated?: (task: Task) => void;
 }
 
@@ -57,8 +64,18 @@ function prepareTaskInput(
     reasoningLevel?: string;
     environmentId?: string | null;
     sandboxEnvironmentId?: string;
+    additionalRepos?: AdditionalRepoOption[];
   },
 ): TaskCreationInput {
+  const validAdditionalRepos = options.additionalRepos
+    ?.filter((r) => r.directory)
+    .map((r) => ({
+      repoPath: r.directory,
+      mode: r.mode,
+      branch: r.branch,
+      label: r.directory.split("/").pop(),
+    }));
+
   return {
     content: contentToXml(content).trim(),
     filePaths: extractFilePaths(content),
@@ -73,6 +90,10 @@ function prepareTaskInput(
     reasoningLevel: options.reasoningLevel,
     environmentId: options.environmentId ?? undefined,
     sandboxEnvironmentId: options.sandboxEnvironmentId,
+    additionalRepos:
+      validAdditionalRepos && validAdditionalRepos.length > 0
+        ? validAdditionalRepos
+        : undefined,
   };
 }
 
@@ -101,6 +122,7 @@ export function useTaskCreation({
   reasoningLevel,
   environmentId,
   sandboxEnvironmentId,
+  additionalRepos,
   onTaskCreated,
 }: UseTaskCreationOptions): UseTaskCreationReturn {
   const [isCreatingTask, setIsCreatingTask] = useState(false);
@@ -149,6 +171,7 @@ export function useTaskCreation({
         reasoningLevel,
         environmentId,
         sandboxEnvironmentId,
+        additionalRepos,
       });
 
       if (executionMode) {
@@ -197,6 +220,7 @@ export function useTaskCreation({
     reasoningLevel,
     environmentId,
     sandboxEnvironmentId,
+    additionalRepos,
     invalidateTasks,
     navigateToTask,
     onTaskCreated,

apps/code/src/renderer/sagas/task/task-creation.ts

@@ -55,6 +55,13 @@ const sagaLogger: SagaLogger = {
   warn: (message, data) => log.warn(message, data),
 };
 
+export interface AdditionalRepoInput {
+  repoPath: string;
+  mode: WorkspaceMode;
+  branch?: string | null;
+  label?: string;
+}
+
 export interface TaskCreationInput {
   // For opening existing task
   taskId?: string;
@@ -73,6 +80,8 @@ export interface TaskCreationInput {
   environmentId?: string;
   sandboxEnvironmentId?: string;
   signalReportId?: string;
+  /** Additional repos for multi-repo tasks. */
+  additionalRepos?: AdditionalRepoInput[];
 }
 
 export interface TaskCreationOutput {
@@ -160,6 +169,34 @@ export class TaskCreationSaga extends Saga<
             this.resolveFolder(repoPath),
           );
 
+      // Resolve additional repo folders in parallel
+      let additionalRepoConfigs:
+        | {
+            mainRepoPath: string;
+            folderId: string;
+            folderPath: string;
+            mode: WorkspaceMode;
+            branch?: string;
+            label?: string;
+          }[]
+        | undefined;
+      if (input.additionalRepos && input.additionalRepos.length > 0) {
+        const resolvedFolders = await Promise.all(
+          input.additionalRepos.map(async (repo) => ({
+            folder: await this.resolveFolder(repo.repoPath),
+            repo,
+          })),
+        );
+        additionalRepoConfigs = resolvedFolders.map(({ folder: f, repo }) => ({
+          mainRepoPath: repo.repoPath,
+          folderId: f.id,
+          folderPath: repo.repoPath,
+          mode: (repo.mode ?? workspaceMode) as WorkspaceMode,
+          branch: repo.branch ?? undefined,
+          label: repo.label ?? repo.repoPath.split("/").pop(),
+        }));
+      }
+
       const workspaceInfos = await this.step({
         name: "workspace_creation",
         execute: async () => {
@@ -170,6 +207,10 @@ export class TaskCreationSaga extends Saga<
             folderPath: repoPath,
             mode: workspaceMode,
             branch: branch ?? undefined,
+            label: additionalRepoConfigs
+              ? repoPath.split("/").pop()
+              : undefined,
+            additionalRepos: additionalRepoConfigs,
           });
         },
         rollback: async () => {