From 49d98aed77349b4594c9a4b9b59fe36c1b73a469 Mon Sep 17 00:00:00 2001
From: dinq <iamdinq@gmail.com>
Date: Fri, 25 Sep 2026 07:29:50 -0400
Subject: [PATCH 1/4] fix(app): list draft projects from every connected
 Environment

The draft picker only listed the active Environment's projects, so a
linked host's projects were invisible until its Environment became the
draft target. The picker now fans project.list across every connected
Environment (same prefixed cache keys the sidebar uses), groups and
labels each Environment when more than one has projects, and picking a
project writes the owning Environment's id into the draft URL.

Non-project chats stay local: clearing the project drops the
environment hint, and a linked host's picker hides every path back to
null (no clear, no Choose project, no Don't-work button) because
chat-folder allocation under ~/Pie is local-only.
---
 .../verify-pie/features/draft-new-chat.md     |   4 +-
 CONTEXT.md                                    |   2 +-
 .../features/projects/project-select.test.tsx |  84 ++++++++++++++
 .../src/features/projects/project-select.tsx  | 107 ++++++++++++++----
 apps/app/src/routes/draft-composer.tsx        |  43 +++++--
 apps/app/src/routes/draft.tsx                 | 103 ++++++++++++++---
 6 files changed, 291 insertions(+), 52 deletions(-)
 create mode 100644 apps/app/src/features/projects/project-select.test.tsx

diff --git a/.agents/skills/verify-pie/features/draft-new-chat.md b/.agents/skills/verify-pie/features/draft-new-chat.md
index 4a66ab893..405677461 100644
--- a/.agents/skills/verify-pie/features/draft-new-chat.md
+++ b/.agents/skills/verify-pie/features/draft-new-chat.md
@@ -5,7 +5,7 @@ The new-session surface. `/` has no UI — it redirects to `/draft`. A send crea
 ## Sub-features
 
 - **Centered composer** always: project picker, optional git workspace/worktree controls, model select, TipTap input, submit. Zero projects is not an empty state — the picker stays on **Choose project**. Import remains on the sidebar.
-- **Project picker** — default **Choose project** (no `?projectId=`). The folder icon is part of the trigger. Choosing a project writes `?projectId=` (replace). Hovering the picker shows **X** in place of the folder icon; click **X** clears `?projectId=` back to Choose project without opening the list. Opening the list shows projects, then a **Don't work in a project** button (same clear).
+- **Project picker** — default **Choose project** (no `?projectId=`). The folder icon is part of the trigger. The list covers every connected Environment's imported projects; when more than one Environment has projects, each group is labeled with its Environment title (sidebar style). Picking a project writes `?projectId=` + `?environmentId=` of the owning Environment. Hovering the picker shows **X** in place of the folder icon; click **X** clears back to Choose project and drops `?environmentId=` (non-project chats are local). Opening the list shows projects, then a **Don't work in a project** button (same clear). On a linked host the picker restricts: no clear, no **Choose project** item, no **Don't work in a project**; send needs a Project.
 - **Choose project send** — `project.allocate` creates `<root>/<YYYY-MM-DD>/Chat-1/` (then `Chat-2`, …), registers it as a Project with `type: "chat"`, then `session.create`. Sidebar **Recent** lists the session (title is the prompt). **Projects** does not show the chat leaf. The picker still lists imported folders only.
 - **Workspace mode** (git repos only, after a real Project is selected): **Current directory** vs **New worktree**. Worktree requires a **base branch** (`aria-label="Base branch for worktree"`). Non-git shows **Not a Git repository**. Missing folder shows **Workspace unavailable** and blocks send.
 - **Model select** — options from Pi `get_available_models`, grouped by provider, trigger shows the model name or **Default**, including when the model list is empty. Default model is written into `?provider=&modelId=` once.
@@ -51,7 +51,7 @@ Worktree path (only if the imported folder is a git repo): switch the workspace
 ## Gotchas
 
 - CDP Enter does **not** submit. Click the arrow button. Draft submit has **no aria-label** — identify it as the composer submit after the field is non-empty.
-- Send is disabled when: input empty, workspace unavailable, create in flight, or worktree mode with no base branch. It is **not** disabled for Choose project.
+- Send is disabled when: input empty, workspace unavailable, create in flight, or worktree mode with no base branch. It is **not** disabled for Choose project on this device. A linked host (`?environmentId=` other than local) restricts the picker: no clear (X), no **Choose project** item, no **Don't work in a project**; send needs a Project.
 - Model select missing ≠ broken draft. Pi unavailable ⇒ empty list ⇒ component returns `null`.
 - After adding/renaming routes, load `/` through Vite before typechecking (`routeTree.gen.ts` is plugin-generated).
 - Verify sets `PIE_CHAT_PROJECTS_DIR=$PIE_HOME/Pie`. `HOME` and `~/.pi/agent` stay the operator's.
diff --git a/CONTEXT.md b/CONTEXT.md
index 0ca8c248f..6cc9599aa 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -5,7 +5,7 @@ Glossary of project-specific terms. pie integrates the Pi coding agent into the
 ## Session Domain
 
 **Project**:
-A working directory the user has registered with the server, identified by a server-generated UUID. The single source of the projectId → directory mapping; the directory field is `path`. Registration is the trust boundary for declarative Project-local Pi resources: session children approve prompts, skills, and context from that Project. Automatic Pi extension discovery is disabled for every Pie-owned child because Pie does not yet model inputs that an extension handles without starting a model turn; this intentionally makes discovered global and Project extension commands, tools, hooks, and UI unavailable. The extension request plumbing remains at the Pi protocol seam for compatibility and future explicit extension support. Sessions always resolve their working directory through a Project, never from a caller-supplied path. A session may start without picking an existing Project: `project.allocateChatProjectDir` creates a folder under the **chat-project root**, registers it with `type: "chat"`, then `session.create` uses that id as usual. Chat projects stay off the **Projects** sidebar and picker; their sessions appear under **Recent**.
+A working directory the user has registered with the server, identified by a server-generated UUID. The single source of the projectId → directory mapping; the directory field is `path`. Registration is the trust boundary for declarative Project-local Pi resources: session children approve prompts, skills, and context from that Project. Automatic Pi extension discovery is disabled for every Pie-owned child because Pie does not yet model inputs that an extension handles without starting a model turn; this intentionally makes discovered global and Project extension commands, tools, hooks, and UI unavailable. The extension request plumbing remains at the Pi protocol seam for compatibility and future explicit extension support. Sessions always resolve their working directory through a Project, never from a caller-supplied path. A session may start without picking an existing Project: `project.allocateChatProjectDir` creates a folder under the **chat-project root**, registers it with `type: "chat"`, then `session.create` uses that id as usual. That path is local-only — a linked host does not support a non-project chat yet, so its draft picker requires an imported Project (no clear, no "Don't work in a project"). Chat projects stay off the **Projects** sidebar and picker; their sessions appear under **Recent**.
 _Avoid_: workspace, repo, cwd (for the Project field)
 
 **Chat-project root**:
diff --git a/apps/app/src/features/projects/project-select.test.tsx b/apps/app/src/features/projects/project-select.test.tsx
new file mode 100644
index 000000000..c973a6e91
--- /dev/null
+++ b/apps/app/src/features/projects/project-select.test.tsx
@@ -0,0 +1,84 @@
+import type { Project } from "@getpie/contract";
+import { describe, expect, it, vi } from "vitest";
+import { render } from "vitest-browser-react";
+import { page } from "vitest/browser";
+
+import { ProjectSelect, type ProjectGroup, type ProjectSelection } from "./project-select";
+
+const project = (id: string): Project => ({
+  id,
+  name: id,
+  path: `/tmp/${id}`,
+  createdAt: "2026-01-01T00:00:00.000Z",
+});
+
+const localGroup: ProjectGroup = {
+  environmentId: "env-local",
+  environmentTitle: "This device",
+  projects: [project("p-one"), project("p-two")],
+};
+
+const remoteGroup: ProjectGroup = {
+  environmentId: "env-remote",
+  environmentTitle: "macbook-pro-m1",
+  projects: [project("p-r1")],
+};
+
+async function openPicker(): Promise<void> {
+  await page.getByRole("combobox").click();
+}
+
+describe("ProjectSelect", () => {
+  it("keeps null mode locally: clear affordance and Don't-work button", async () => {
+    await render(
+      <ProjectSelect
+        groups={[localGroup]}
+        onChange={() => {}}
+        value={{ environmentId: "env-local", projectId: "p-one" }}
+      />,
+    );
+    expect(document.querySelector('[aria-label="Clear project"]')).not.toBeNull();
+    await openPicker();
+    expect(document.body.textContent).toContain("p-two");
+    expect(document.body.textContent).toContain("Don't work in a project");
+    expect(document.body.textContent).not.toContain("This device");
+  });
+
+  it("requireProject (linked host) hides every path back to null", async () => {
+    await render(
+      <ProjectSelect
+        groups={[remoteGroup]}
+        onChange={() => {}}
+        requireProject
+        value={{ environmentId: "env-remote", projectId: "p-r1" }}
+      />,
+    );
+    expect(document.querySelector('[aria-label="Clear project"]')).toBeNull();
+    await openPicker();
+    expect(document.body.textContent).toContain("p-r1");
+    expect(document.body.textContent).not.toContain("Don't work in a project");
+  });
+
+  it("labels each environment and emits the owning environment on pick", async () => {
+    const onChange = vi.fn<(next: ProjectSelection | null) => void>();
+    await render(
+      <ProjectSelect
+        group
+        groups={[localGroup, remoteGroup]}
+        onChange={onChange}
+        value={{ environmentId: "env-local", projectId: "p-one" }}
+      />,
+    );
+    await openPicker();
+    expect(document.body.textContent).toContain("This device");
+    expect(document.body.textContent).toContain("macbook-pro-m1");
+    expect(document.body.textContent).toContain("p-r1");
+    await page.getByText("p-r1").click();
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        environmentId: "env-remote",
+        project: expect.objectContaining({ id: "p-r1" }),
+      }),
+    );
+  });
+});
diff --git a/apps/app/src/features/projects/project-select.tsx b/apps/app/src/features/projects/project-select.tsx
index c1b96341b..2536538dd 100644
--- a/apps/app/src/features/projects/project-select.tsx
+++ b/apps/app/src/features/projects/project-select.tsx
@@ -3,6 +3,8 @@ import { Button } from "@getpie/ui/components/button";
 import {
   Select,
   SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
   SelectItem,
   SelectSeparator,
   SelectTrigger,
@@ -14,19 +16,50 @@ import { useState } from "react";
 /** Sentinel that is not a project UUID — `allocateChatProjectDir` on send. */
 const NEW_FOLDER_VALUE = "new-folder";
 
-// Draft project picker. `null` / Choose project → allocate under `~/Pie` on send.
+/** One Environment's pickable imported projects. */
+export type ProjectGroup = {
+  readonly environmentId: string;
+  readonly environmentTitle: string;
+  readonly projects: ReadonlyArray<Project>;
+};
+
+/** What a pick emits — the project plus the Environment that owns it. */
+export type ProjectSelection = {
+  readonly environmentId: string;
+  readonly environmentTitle: string;
+  readonly project: Project;
+};
+
+/** ids are UUIDs, so ':' cannot appear in either half. */
+const selectionValue = (environmentId: string, projectId: string): string =>
+  `${environmentId}:${projectId}`;
+
+// Draft project picker across every connected Environment. `null` / Choose
+// project → allocate under `~/Pie` on send. `requireProject` (linked host):
+// no null mode — no clear, no "Don't work in a project", because chat-folder
+// allocation is local-only.
 export function ProjectSelect({
+  group,
+  groups,
   onChange,
-  projects,
+  requireProject = false,
   value,
 }: {
-  onChange: (projectId: string | null) => void;
-  projects: ReadonlyArray<Project>;
-  value: string | null;
+  /** Label each Environment's group (more than one has projects). */
+  readonly group?: boolean;
+  /** Environments in switcher order; empty ones already filtered out. */
+  readonly groups: ReadonlyArray<ProjectGroup>;
+  onChange: (next: ProjectSelection | null) => void;
+  readonly requireProject?: boolean;
+  /** Currently picked project, or null for Choose project. */
+  readonly value: { environmentId: string; projectId: string } | null;
 }) {
   const [hovered, setHovered] = useState(false);
   const [open, setOpen] = useState(false);
-  const selected = projects.find((project) => project.id === value);
+  const selectedGroup = groups.find((entry) => entry.environmentId === value?.environmentId);
+  const selectedProject = selectedGroup?.projects.find(
+    (project) => project.id === value?.projectId,
+  );
 
   return (
     <div
@@ -44,16 +77,38 @@ export function ProjectSelect({
     >
       <Select
         items={[
-          { label: "Choose project", value: NEW_FOLDER_VALUE },
-          ...projects.map((project) => ({ label: project.name, value: project.id })),
+          ...(requireProject ? [] : [{ label: "Choose project", value: NEW_FOLDER_VALUE }]),
+          ...groups.flatMap((entry) =>
+            entry.projects.map((project) => ({
+              label: project.name,
+              value: selectionValue(entry.environmentId, project.id),
+            })),
+          ),
         ]}
         onOpenChange={setOpen}
         onValueChange={(next) => {
-          if (next === NEW_FOLDER_VALUE) onChange(null);
-          else if (typeof next === "string") onChange(next);
+          if (next === NEW_FOLDER_VALUE) {
+            onChange(null);
+            return;
+          }
+          for (const entry of groups) {
+            const project = entry.projects.find(
+              (candidate) => selectionValue(entry.environmentId, candidate.id) === next,
+            );
+            if (project !== undefined) {
+              onChange({
+                environmentId: entry.environmentId,
+                environmentTitle: entry.environmentTitle,
+                project,
+              });
+              return;
+            }
+          }
         }}
         open={open}
-        value={value ?? NEW_FOLDER_VALUE}
+        value={
+          value === null ? NEW_FOLDER_VALUE : selectionValue(value.environmentId, value.projectId)
+        }
       >
         {/* The name is only the folder's basename, so two projects can share one —
           the path is what actually tells them apart. */}
@@ -64,9 +119,9 @@ export function ProjectSelect({
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
           size="sm"
-          title={selected?.path}
+          title={selectedProject?.path}
         >
-          {value !== null ? (
+          {value !== null && !requireProject ? (
             <span
               aria-label="Clear project"
               className={
@@ -84,17 +139,25 @@ export function ProjectSelect({
           <SelectValue placeholder="Choose project" />
         </SelectTrigger>
         <SelectContent>
-          {projects.map((project) => (
-            <SelectItem key={project.id} value={project.id}>
-              <span className="flex min-w-0 flex-col">
-                <span className="truncate">{project.name}</span>
-                <span className="text-muted-foreground truncate text-xs">{project.path}</span>
-              </span>
-            </SelectItem>
+          {groups.map((entry) => (
+            <SelectGroup key={entry.environmentId}>
+              {group ? <SelectGroupLabel>{entry.environmentTitle}</SelectGroupLabel> : null}
+              {entry.projects.map((project) => (
+                <SelectItem
+                  key={selectionValue(entry.environmentId, project.id)}
+                  value={selectionValue(entry.environmentId, project.id)}
+                >
+                  <span className="flex min-w-0 flex-col">
+                    <span className="truncate">{project.name}</span>
+                    <span className="text-muted-foreground truncate text-xs">{project.path}</span>
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectGroup>
           ))}
-          {value !== null ? (
+          {value !== null && !requireProject ? (
             <>
-              {projects.length > 0 ? <SelectSeparator /> : null}
+              {groups.length > 0 ? <SelectSeparator /> : null}
               <Button
                 className="w-full justify-start"
                 onClick={() => {
diff --git a/apps/app/src/routes/draft-composer.tsx b/apps/app/src/routes/draft-composer.tsx
index f516a142a..c6ef011de 100644
--- a/apps/app/src/routes/draft-composer.tsx
+++ b/apps/app/src/routes/draft-composer.tsx
@@ -1,4 +1,4 @@
-import type { CreateWorktreeInput, Project } from "@getpie/contract";
+import type { CreateWorktreeInput } from "@getpie/contract";
 import { PromptInputSubmit } from "@getpie/ui/ai-elements/prompt-input";
 import { CardFrameHeader } from "@getpie/ui/components/card";
 import { toast } from "sonner";
@@ -14,30 +14,40 @@ import {
   type DraftWorkspaceMode,
 } from "@/features/projects/draft-workspace-select";
 import { DraftWorktreeBaseSelect } from "@/features/projects/draft-worktree-base-select";
-import { ProjectSelect } from "@/features/projects/project-select";
+import {
+  ProjectSelect,
+  type ProjectGroup,
+  type ProjectSelection,
+} from "@/features/projects/project-select";
 import { useDraftWorktree } from "@/features/projects/use-draft-worktree";
 
 export function DraftComposer({
   draftModel,
+  group,
+  groups,
   models,
   onModelChange,
   onProjectChange,
   onStart,
-  projects,
+  requireProject = false,
   selected,
   startPending,
 }: {
   readonly draftModel: { provider: string; modelId: string } | undefined;
+  /** Label each Environment's group when more than one has projects. */
+  readonly group?: boolean;
+  readonly groups: ReadonlyArray<ProjectGroup>;
   readonly models: Parameters<typeof ModelSelectorPicker>[0]["models"];
   readonly onModelChange: (provider: string, modelId: string) => void;
-  readonly onProjectChange: (next: string | null) => void;
+  readonly onProjectChange: (next: ProjectSelection | null) => void;
   readonly onStart: (text: string, worktree?: CreateWorktreeInput) => void;
-  readonly projects: ReadonlyArray<Project>;
-  readonly selected: Project | null;
+  /** Linked host — the picker never offers null, so send needs a project. */
+  readonly requireProject?: boolean;
+  readonly selected: ProjectSelection | null;
   readonly startPending: boolean;
 }) {
-  const draftWorktree = useDraftWorktree(selected);
-  const commandState = useSlashCommandState(selected?.id);
+  const draftWorktree = useDraftWorktree(selected?.project ?? null);
+  const commandState = useSlashCommandState(selected?.project.id);
   const controller = useChatComposerController({
     onSubmit: (text) => {
       if (draftWorktree.gitState === "workspace-unavailable") {
@@ -45,6 +55,8 @@ export function DraftComposer({
         return false;
       }
       if (startPending) return false;
+      // Linked host: nothing to send against until a Project is picked.
+      if (requireProject && selected === null) return false;
       if (draftWorktree.mode === "worktree" && draftWorktree.worktree === undefined) {
         toast.error("Pick a base branch for the worktree.");
         return false;
@@ -54,7 +66,7 @@ export function DraftComposer({
     },
   });
   const hasContent = useChatInputHasContent(controller);
-  const selectedId = selected?.id ?? null;
+  const selectedId = selected?.project.id ?? null;
 
   return (
     <div className="flex h-full items-center justify-center p-4">
@@ -65,7 +77,17 @@ export function DraftComposer({
         header={
           <CardFrameHeader className="py-2">
             <div className="-mx-4 flex min-w-0 flex-wrap items-center gap-0">
-              <ProjectSelect onChange={onProjectChange} projects={projects} value={selectedId} />
+              <ProjectSelect
+                group={group}
+                groups={groups}
+                onChange={onProjectChange}
+                requireProject={requireProject}
+                value={
+                  selected === null
+                    ? null
+                    : { environmentId: selected.environmentId, projectId: selected.project.id }
+                }
+              />
               {draftWorktree.gitState === "not-repository" ? (
                 <span className="text-muted-foreground px-2 text-xs">Not a Git repository</span>
               ) : null}
@@ -84,6 +106,7 @@ export function DraftComposer({
         submit={
           <PromptInputSubmit
             disabled={
+              (requireProject && selectedId === null) ||
               !hasContent ||
               draftWorktree.gitState === "workspace-unavailable" ||
               startPending ||
diff --git a/apps/app/src/routes/draft.tsx b/apps/app/src/routes/draft.tsx
index 144414b62..e651186a9 100644
--- a/apps/app/src/routes/draft.tsx
+++ b/apps/app/src/routes/draft.tsx
@@ -13,7 +13,13 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from "@getpie/ui/components/empty";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+  type UseQueryResult,
+} from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { FolderPlusIcon } from "lucide-react";
 import { useState } from "react";
@@ -22,7 +28,11 @@ import { toast } from "sonner";
 import Loader from "@/components/loader";
 import { useChatManager } from "@/features/chat/runtime/chat-context";
 import { ImportProjectDialog } from "@/features/projects/import-project-dialog";
-import { useProject, useProjects } from "@/features/projects/use-projects";
+import type { ProjectGroup, ProjectSelection } from "@/features/projects/project-select";
+import {
+  useConnectedEnvironments,
+  type ConnectedEnvironment,
+} from "@/features/projects/use-connected-environments";
 import { EnvironmentOrpcProvider, useCatalogOrpc } from "@/lib/environment-orpc";
 
 import { DraftComposer } from "./draft-composer";
@@ -67,7 +77,48 @@ function DraftRoute() {
   );
 }
 
+/** Imported projects per Environment, switcher order, oldest-first within each. */
+function buildDraftGroups(
+  environments: ReadonlyArray<ConnectedEnvironment>,
+  projectLists: ReadonlyArray<UseQueryResult<ReadonlyArray<Project>>>,
+): ProjectGroup[] {
+  const groups: ProjectGroup[] = [];
+  for (let index = 0; index < environments.length; index += 1) {
+    const environment = environments[index];
+    const list = projectLists[index]?.data;
+    if (environment === undefined || list === undefined) continue;
+    const projects = Array.from(list)
+      .filter((project) => project.type !== "chat")
+      .sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+    if (projects.length === 0) continue;
+    groups.push({
+      environmentId: environment.environmentId,
+      environmentTitle: environment.title,
+      projects,
+    });
+  }
+  return groups;
+}
+
+/** The picked project plus the Environment that owns it, or null. */
+function findSelection(
+  groups: ReadonlyArray<ProjectGroup>,
+  environmentId: string,
+  projectId: string | undefined,
+): ProjectSelection | null {
+  if (projectId === undefined) return null;
+  const own = groups.find((group) => group.environmentId === environmentId);
+  const project = own?.projects.find((candidate) => candidate.id === projectId);
+  if (own === undefined || project === undefined) return null;
+  return {
+    environmentId: own.environmentId,
+    environmentTitle: own.environmentTitle,
+    project,
+  };
+}
+
 function DraftPage({ environmentId }: { readonly environmentId: string }) {
+  const { localEnvironmentId, environmentRpc } = Route.useRouteContext();
   const orpcQueryUtils = useCatalogOrpc();
   const search = Route.useSearch();
   const navigate = useNavigate();
@@ -75,11 +126,23 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
   const queryClient = useQueryClient();
   const [importOpen, setImportOpen] = useState(false);
 
-  const projects = useProjects();
-  const selected = useProject(search.projectId) ?? null;
+  // One project.list per connected Environment — same prefixed keys the
+  // sidebar and catalog worker use, so this subscribes to warm caches.
+  const environments = useConnectedEnvironments();
+  const projectLists = useQueries({
+    queries: environments.map((environment) =>
+      environmentRpc.for(environment.environmentId).project.list.queryOptions(),
+    ),
+  });
+
+  const groups = buildDraftGroups(environments, projectLists);
+  const selected = findSelection(groups, environmentId, search.projectId);
+  // Linked host: chat-folder allocation (`~/Pie`) is local-only, so the draft
+  // requires an imported Project there.
+  const requireProject = environmentId !== localEnvironmentId;
   const modelsQuery = useQuery(
     orpcQueryUtils.agent.listModels.queryOptions({
-      input: selected?.id ? { projectId: selected.id } : {},
+      input: selected?.project.id ? { projectId: selected.project.id } : {},
     }),
   );
   const defaultModel = modelsQuery.data?.defaultModel;
@@ -91,7 +154,7 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
   const startSession = useMutation({
     mutationKey: orpcQueryUtils.agent.session.create.key(),
     mutationFn: async ({ text, worktree }: { text: string; worktree?: CreateWorktreeInput }) => {
-      let projectId = selected?.id;
+      let projectId = selected?.project.id;
       if (projectId === undefined) {
         const allocated = await orpcQueryUtils.project.allocateChatProjectDir.call();
         const projectListKey = orpcQueryUtils.project.list.queryOptions().queryKey;
@@ -154,20 +217,19 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
     },
   });
 
-  if (projects.isPending) {
+  if (projectLists.some((list) => list.isPending)) {
     return <Loader />;
   }
 
-  if (projects.isError) {
+  const ownList =
+    projectLists[environments.findIndex((entry) => entry.environmentId === environmentId)];
+  if (ownList?.isError) {
     return (
-      <DraftProjectsError
-        message={projects.error.message}
-        onRetry={() => void projects.refetch()}
-      />
+      <DraftProjectsError message={ownList.error.message} onRetry={() => void ownList.refetch()} />
     );
   }
 
-  if (projects.data.length === 0 && search.projectId === undefined) {
+  if (groups.length === 0 && search.projectId === undefined) {
     return (
       <DraftEmptyImport
         importOpen={importOpen}
@@ -189,6 +251,8 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
   return (
     <DraftComposer
       draftModel={draftModel}
+      group={groups.length > 1}
+      groups={groups}
       models={modelsQuery.data?.models ?? []}
       onModelChange={(provider, modelId) => {
         navigate({
@@ -204,10 +268,15 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
           to: "/draft",
           search: (prev) => {
             if (next === null) {
-              const { projectId: _removed, ...rest } = prev;
-              return { ...rest, environmentId };
+              // Non-project chats allocate locally — drop the environment hint.
+              const { projectId: _removed, environmentId: _dropped, ...rest } = prev;
+              return rest;
             }
-            return { ...prev, projectId: next, environmentId };
+            return {
+              ...prev,
+              projectId: next.project.id,
+              environmentId: next.environmentId,
+            };
           },
           replace: true,
         }).catch((error: unknown) => {
@@ -220,7 +289,7 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
           ...(worktree !== undefined ? { worktree } : undefined),
         });
       }}
-      projects={projects.data ?? []}
+      requireProject={requireProject}
       selected={selected}
       startPending={startSession.isPending}
     />

From 8c0c534aa50b2a369db7ba5781e7da4e29912096 Mon Sep 17 00:00:00 2001
From: dinq <iamdinq@gmail.com>
Date: Sat, 26 Sep 2026 11:22:48 -0400
Subject: [PATCH 2/4] fix(app): filter the draft project list by the selected
 Environment

A grouped project dropdown mixed every host. Pick the Environment first;
the project list is only that Environment's imported projects.
---
 .../verify-pie/features/draft-new-chat.md     |   3 +-
 CONTEXT.md                                    |   2 +-
 .../draft-environment-select.test.tsx         |  49 +++++++++
 .../projects/draft-environment-select.tsx     |  49 +++++++++
 .../features/projects/project-select.test.tsx |  57 +---------
 .../src/features/projects/project-select.tsx  | 103 ++++--------------
 apps/app/src/routes/draft-composer.tsx        |  47 ++++----
 apps/app/src/routes/draft.tsx                 |  59 +++++-----
 8 files changed, 184 insertions(+), 185 deletions(-)
 create mode 100644 apps/app/src/features/projects/draft-environment-select.test.tsx
 create mode 100644 apps/app/src/features/projects/draft-environment-select.tsx

diff --git a/.agents/skills/verify-pie/features/draft-new-chat.md b/.agents/skills/verify-pie/features/draft-new-chat.md
index 405677461..3c87cb104 100644
--- a/.agents/skills/verify-pie/features/draft-new-chat.md
+++ b/.agents/skills/verify-pie/features/draft-new-chat.md
@@ -5,7 +5,8 @@ The new-session surface. `/` has no UI — it redirects to `/draft`. A send crea
 ## Sub-features
 
 - **Centered composer** always: project picker, optional git workspace/worktree controls, model select, TipTap input, submit. Zero projects is not an empty state — the picker stays on **Choose project**. Import remains on the sidebar.
-- **Project picker** — default **Choose project** (no `?projectId=`). The folder icon is part of the trigger. The list covers every connected Environment's imported projects; when more than one Environment has projects, each group is labeled with its Environment title (sidebar style). Picking a project writes `?projectId=` + `?environmentId=` of the owning Environment. Hovering the picker shows **X** in place of the folder icon; click **X** clears back to Choose project and drops `?environmentId=` (non-project chats are local). Opening the list shows projects, then a **Don't work in a project** button (same clear). On a linked host the picker restricts: no clear, no **Choose project** item, no **Don't work in a project**; send needs a Project.
+- **Environment picker** — hidden when only this device is connected. When another host is linked, combobox **Environment** lists connected hosts. Picking one writes `?environmentId=` and clears `?projectId=`. The project list is only that Environment's imported projects.
+- **Project picker** — default **Choose project** (no `?projectId=`). The folder icon is part of the trigger. Choosing a project writes `?projectId=` (replace) and keeps the selected Environment. Hovering the picker shows **X** in place of the folder icon; click **X** clears `?projectId=` and drops `?environmentId=` (non-project chats are local). Opening the list shows that Environment's projects, then a **Don't work in a project** button (same clear). On a linked host the picker restricts: no clear, no **Choose project** item, no **Don't work in a project**; send needs a Project.
 - **Choose project send** — `project.allocate` creates `<root>/<YYYY-MM-DD>/Chat-1/` (then `Chat-2`, …), registers it as a Project with `type: "chat"`, then `session.create`. Sidebar **Recent** lists the session (title is the prompt). **Projects** does not show the chat leaf. The picker still lists imported folders only.
 - **Workspace mode** (git repos only, after a real Project is selected): **Current directory** vs **New worktree**. Worktree requires a **base branch** (`aria-label="Base branch for worktree"`). Non-git shows **Not a Git repository**. Missing folder shows **Workspace unavailable** and blocks send.
 - **Model select** — options from Pi `get_available_models`, grouped by provider, trigger shows the model name or **Default**, including when the model list is empty. Default model is written into `?provider=&modelId=` once.
diff --git a/CONTEXT.md b/CONTEXT.md
index 6cc9599aa..7e37cbeb7 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -5,7 +5,7 @@ Glossary of project-specific terms. pie integrates the Pi coding agent into the
 ## Session Domain
 
 **Project**:
-A working directory the user has registered with the server, identified by a server-generated UUID. The single source of the projectId → directory mapping; the directory field is `path`. Registration is the trust boundary for declarative Project-local Pi resources: session children approve prompts, skills, and context from that Project. Automatic Pi extension discovery is disabled for every Pie-owned child because Pie does not yet model inputs that an extension handles without starting a model turn; this intentionally makes discovered global and Project extension commands, tools, hooks, and UI unavailable. The extension request plumbing remains at the Pi protocol seam for compatibility and future explicit extension support. Sessions always resolve their working directory through a Project, never from a caller-supplied path. A session may start without picking an existing Project: `project.allocateChatProjectDir` creates a folder under the **chat-project root**, registers it with `type: "chat"`, then `session.create` uses that id as usual. That path is local-only — a linked host does not support a non-project chat yet, so its draft picker requires an imported Project (no clear, no "Don't work in a project"). Chat projects stay off the **Projects** sidebar and picker; their sessions appear under **Recent**.
+A working directory the user has registered with the server, identified by a server-generated UUID. The single source of the projectId → directory mapping; the directory field is `path`. Registration is the trust boundary for declarative Project-local Pi resources: session children approve prompts, skills, and context from that Project. Automatic Pi extension discovery is disabled for every Pie-owned child because Pie does not yet model inputs that an extension handles without starting a model turn; this intentionally makes discovered global and Project extension commands, tools, hooks, and UI unavailable. The extension request plumbing remains at the Pi protocol seam for compatibility and future explicit extension support. Sessions always resolve their working directory through a Project, never from a caller-supplied path. A session may start without picking an existing Project: `project.allocateChatProjectDir` creates a folder under the **chat-project root**, registers it with `type: "chat"`, then `session.create` uses that id as usual. That path is local-only. The draft picks an Environment first when more than one is connected; the project list is that Environment's imported projects. A linked host requires an imported Project (no clear, no "Don't work in a project"). Chat projects stay off the **Projects** sidebar and picker; their sessions appear under **Recent**.
 _Avoid_: workspace, repo, cwd (for the Project field)
 
 **Chat-project root**:
diff --git a/apps/app/src/features/projects/draft-environment-select.test.tsx b/apps/app/src/features/projects/draft-environment-select.test.tsx
new file mode 100644
index 000000000..99d8c9710
--- /dev/null
+++ b/apps/app/src/features/projects/draft-environment-select.test.tsx
@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import { render } from "vitest-browser-react";
+import { page } from "vitest/browser";
+
+import { DraftEnvironmentSelect } from "./draft-environment-select";
+import type { ConnectedEnvironment } from "./use-connected-environments";
+
+const environment = (
+  environmentId: string,
+  title: string,
+  kind: ConnectedEnvironment["kind"],
+): ConnectedEnvironment => ({
+  environmentId,
+  title,
+  description: kind === "local" ? "This device" : environmentId,
+  kind,
+});
+
+describe("DraftEnvironmentSelect", () => {
+  it("stays hidden when only this device is connected", async () => {
+    await render(
+      <DraftEnvironmentSelect
+        environments={[environment("local", "This device", "local")]}
+        onChange={() => {}}
+        value="local"
+      />,
+    );
+    expect(document.querySelector('[aria-label="Environment"]')).toBeNull();
+  });
+
+  it("lists connected environments and emits the picked id", async () => {
+    const picked: string[] = [];
+    await render(
+      <DraftEnvironmentSelect
+        environments={[
+          environment("local", "This device", "local"),
+          environment("remote", "macbook-pro-m1", "remote"),
+        ]}
+        onChange={(environmentId) => {
+          picked.push(environmentId);
+        }}
+        value="local"
+      />,
+    );
+    await page.getByRole("combobox", { name: "Environment" }).click();
+    await page.getByText("macbook-pro-m1").click();
+    expect(picked).toEqual(["remote"]);
+  });
+});
diff --git a/apps/app/src/features/projects/draft-environment-select.tsx b/apps/app/src/features/projects/draft-environment-select.tsx
new file mode 100644
index 000000000..d33b7bb35
--- /dev/null
+++ b/apps/app/src/features/projects/draft-environment-select.tsx
@@ -0,0 +1,49 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@getpie/ui/components/select";
+
+import type { ConnectedEnvironment } from "./use-connected-environments";
+
+/** Draft environment pick. Hidden when only this device is connected. */
+export function DraftEnvironmentSelect({
+  environments,
+  onChange,
+  value,
+}: {
+  environments: ReadonlyArray<ConnectedEnvironment>;
+  onChange: (environmentId: string) => void;
+  value: string;
+}) {
+  if (environments.length < 2) return null;
+  return (
+    <Select
+      items={environments.map((environment) => ({
+        label: environment.title,
+        value: environment.environmentId,
+      }))}
+      onValueChange={(next) => {
+        if (typeof next === "string") onChange(next);
+      }}
+      value={value}
+    >
+      <SelectTrigger
+        aria-label="Environment"
+        className="hover:bg-accent w-auto max-w-56 min-w-0 justify-self-start border-transparent bg-transparent shadow-none before:hidden dark:bg-transparent"
+        size="sm"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {environments.map((environment) => (
+          <SelectItem key={environment.environmentId} value={environment.environmentId}>
+            {environment.title}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/app/src/features/projects/project-select.test.tsx b/apps/app/src/features/projects/project-select.test.tsx
index c973a6e91..60285341e 100644
--- a/apps/app/src/features/projects/project-select.test.tsx
+++ b/apps/app/src/features/projects/project-select.test.tsx
@@ -1,9 +1,9 @@
 import type { Project } from "@getpie/contract";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { render } from "vitest-browser-react";
 import { page } from "vitest/browser";
 
-import { ProjectSelect, type ProjectGroup, type ProjectSelection } from "./project-select";
+import { ProjectSelect } from "./project-select";
 
 const project = (id: string): Project => ({
   id,
@@ -12,17 +12,7 @@ const project = (id: string): Project => ({
   createdAt: "2026-01-01T00:00:00.000Z",
 });
 
-const localGroup: ProjectGroup = {
-  environmentId: "env-local",
-  environmentTitle: "This device",
-  projects: [project("p-one"), project("p-two")],
-};
-
-const remoteGroup: ProjectGroup = {
-  environmentId: "env-remote",
-  environmentTitle: "macbook-pro-m1",
-  projects: [project("p-r1")],
-};
+const projects = [project("p-one"), project("p-two")];
 
 async function openPicker(): Promise<void> {
   await page.getByRole("combobox").click();
@@ -30,55 +20,20 @@ async function openPicker(): Promise<void> {
 
 describe("ProjectSelect", () => {
   it("keeps null mode locally: clear affordance and Don't-work button", async () => {
-    await render(
-      <ProjectSelect
-        groups={[localGroup]}
-        onChange={() => {}}
-        value={{ environmentId: "env-local", projectId: "p-one" }}
-      />,
-    );
+    await render(<ProjectSelect onChange={() => {}} projects={projects} value="p-one" />);
     expect(document.querySelector('[aria-label="Clear project"]')).not.toBeNull();
     await openPicker();
     expect(document.body.textContent).toContain("p-two");
     expect(document.body.textContent).toContain("Don't work in a project");
-    expect(document.body.textContent).not.toContain("This device");
   });
 
   it("requireProject (linked host) hides every path back to null", async () => {
     await render(
-      <ProjectSelect
-        groups={[remoteGroup]}
-        onChange={() => {}}
-        requireProject
-        value={{ environmentId: "env-remote", projectId: "p-r1" }}
-      />,
+      <ProjectSelect onChange={() => {}} projects={projects} requireProject value="p-one" />,
     );
     expect(document.querySelector('[aria-label="Clear project"]')).toBeNull();
     await openPicker();
-    expect(document.body.textContent).toContain("p-r1");
+    expect(document.body.textContent).toContain("p-two");
     expect(document.body.textContent).not.toContain("Don't work in a project");
   });
-
-  it("labels each environment and emits the owning environment on pick", async () => {
-    const onChange = vi.fn<(next: ProjectSelection | null) => void>();
-    await render(
-      <ProjectSelect
-        group
-        groups={[localGroup, remoteGroup]}
-        onChange={onChange}
-        value={{ environmentId: "env-local", projectId: "p-one" }}
-      />,
-    );
-    await openPicker();
-    expect(document.body.textContent).toContain("This device");
-    expect(document.body.textContent).toContain("macbook-pro-m1");
-    expect(document.body.textContent).toContain("p-r1");
-    await page.getByText("p-r1").click();
-    expect(onChange).toHaveBeenCalledWith(
-      expect.objectContaining({
-        environmentId: "env-remote",
-        project: expect.objectContaining({ id: "p-r1" }),
-      }),
-    );
-  });
 });
diff --git a/apps/app/src/features/projects/project-select.tsx b/apps/app/src/features/projects/project-select.tsx
index 2536538dd..49d6585a0 100644
--- a/apps/app/src/features/projects/project-select.tsx
+++ b/apps/app/src/features/projects/project-select.tsx
@@ -3,8 +3,6 @@ import { Button } from "@getpie/ui/components/button";
 import {
   Select,
   SelectContent,
-  SelectGroup,
-  SelectGroupLabel,
   SelectItem,
   SelectSeparator,
   SelectTrigger,
@@ -16,50 +14,23 @@ import { useState } from "react";
 /** Sentinel that is not a project UUID — `allocateChatProjectDir` on send. */
 const NEW_FOLDER_VALUE = "new-folder";
 
-/** One Environment's pickable imported projects. */
-export type ProjectGroup = {
-  readonly environmentId: string;
-  readonly environmentTitle: string;
-  readonly projects: ReadonlyArray<Project>;
-};
-
-/** What a pick emits — the project plus the Environment that owns it. */
-export type ProjectSelection = {
-  readonly environmentId: string;
-  readonly environmentTitle: string;
-  readonly project: Project;
-};
-
-/** ids are UUIDs, so ':' cannot appear in either half. */
-const selectionValue = (environmentId: string, projectId: string): string =>
-  `${environmentId}:${projectId}`;
-
-// Draft project picker across every connected Environment. `null` / Choose
-// project → allocate under `~/Pie` on send. `requireProject` (linked host):
-// no null mode — no clear, no "Don't work in a project", because chat-folder
-// allocation is local-only.
+// Draft project picker for the selected Environment. `null` / Choose project →
+// allocate under `~/Pie` on send. `requireProject` (linked host): no null mode,
+// because chat-folder allocation is local-only.
 export function ProjectSelect({
-  group,
-  groups,
   onChange,
+  projects,
   requireProject = false,
   value,
 }: {
-  /** Label each Environment's group (more than one has projects). */
-  readonly group?: boolean;
-  /** Environments in switcher order; empty ones already filtered out. */
-  readonly groups: ReadonlyArray<ProjectGroup>;
-  onChange: (next: ProjectSelection | null) => void;
-  readonly requireProject?: boolean;
-  /** Currently picked project, or null for Choose project. */
-  readonly value: { environmentId: string; projectId: string } | null;
+  onChange: (projectId: string | null) => void;
+  projects: ReadonlyArray<Project>;
+  requireProject?: boolean;
+  value: string | null;
 }) {
   const [hovered, setHovered] = useState(false);
   const [open, setOpen] = useState(false);
-  const selectedGroup = groups.find((entry) => entry.environmentId === value?.environmentId);
-  const selectedProject = selectedGroup?.projects.find(
-    (project) => project.id === value?.projectId,
-  );
+  const selected = projects.find((project) => project.id === value);
 
   return (
     <div
@@ -78,37 +49,15 @@ export function ProjectSelect({
       <Select
         items={[
           ...(requireProject ? [] : [{ label: "Choose project", value: NEW_FOLDER_VALUE }]),
-          ...groups.flatMap((entry) =>
-            entry.projects.map((project) => ({
-              label: project.name,
-              value: selectionValue(entry.environmentId, project.id),
-            })),
-          ),
+          ...projects.map((project) => ({ label: project.name, value: project.id })),
         ]}
         onOpenChange={setOpen}
         onValueChange={(next) => {
-          if (next === NEW_FOLDER_VALUE) {
-            onChange(null);
-            return;
-          }
-          for (const entry of groups) {
-            const project = entry.projects.find(
-              (candidate) => selectionValue(entry.environmentId, candidate.id) === next,
-            );
-            if (project !== undefined) {
-              onChange({
-                environmentId: entry.environmentId,
-                environmentTitle: entry.environmentTitle,
-                project,
-              });
-              return;
-            }
-          }
+          if (next === NEW_FOLDER_VALUE) onChange(null);
+          else if (typeof next === "string") onChange(next);
         }}
         open={open}
-        value={
-          value === null ? NEW_FOLDER_VALUE : selectionValue(value.environmentId, value.projectId)
-        }
+        value={value ?? NEW_FOLDER_VALUE}
       >
         {/* The name is only the folder's basename, so two projects can share one —
           the path is what actually tells them apart. */}
@@ -119,7 +68,7 @@ export function ProjectSelect({
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
           size="sm"
-          title={selectedProject?.path}
+          title={selected?.path}
         >
           {value !== null && !requireProject ? (
             <span
@@ -139,25 +88,17 @@ export function ProjectSelect({
           <SelectValue placeholder="Choose project" />
         </SelectTrigger>
         <SelectContent>
-          {groups.map((entry) => (
-            <SelectGroup key={entry.environmentId}>
-              {group ? <SelectGroupLabel>{entry.environmentTitle}</SelectGroupLabel> : null}
-              {entry.projects.map((project) => (
-                <SelectItem
-                  key={selectionValue(entry.environmentId, project.id)}
-                  value={selectionValue(entry.environmentId, project.id)}
-                >
-                  <span className="flex min-w-0 flex-col">
-                    <span className="truncate">{project.name}</span>
-                    <span className="text-muted-foreground truncate text-xs">{project.path}</span>
-                  </span>
-                </SelectItem>
-              ))}
-            </SelectGroup>
+          {projects.map((project) => (
+            <SelectItem key={project.id} value={project.id}>
+              <span className="flex min-w-0 flex-col">
+                <span className="truncate">{project.name}</span>
+                <span className="text-muted-foreground truncate text-xs">{project.path}</span>
+              </span>
+            </SelectItem>
           ))}
           {value !== null && !requireProject ? (
             <>
-              {groups.length > 0 ? <SelectSeparator /> : null}
+              {projects.length > 0 ? <SelectSeparator /> : null}
               <Button
                 className="w-full justify-start"
                 onClick={() => {
diff --git a/apps/app/src/routes/draft-composer.tsx b/apps/app/src/routes/draft-composer.tsx
index c6ef011de..655383de6 100644
--- a/apps/app/src/routes/draft-composer.tsx
+++ b/apps/app/src/routes/draft-composer.tsx
@@ -1,4 +1,4 @@
-import type { CreateWorktreeInput } from "@getpie/contract";
+import type { CreateWorktreeInput, Project } from "@getpie/contract";
 import { PromptInputSubmit } from "@getpie/ui/ai-elements/prompt-input";
 import { CardFrameHeader } from "@getpie/ui/components/card";
 import { toast } from "sonner";
@@ -9,45 +9,46 @@ import { SlashCommandMenu } from "@/features/chat/components/input/slash-command
 import { useChatComposerController } from "@/features/chat/components/input/use-chat-composer-controller";
 import { useChatInputHasContent } from "@/features/chat/components/input/use-chat-input-has-content";
 import { useSlashCommandState } from "@/features/chat/hooks/use-slash-command-state";
+import { DraftEnvironmentSelect } from "@/features/projects/draft-environment-select";
 import {
   DraftWorkspaceSelect,
   type DraftWorkspaceMode,
 } from "@/features/projects/draft-workspace-select";
 import { DraftWorktreeBaseSelect } from "@/features/projects/draft-worktree-base-select";
-import {
-  ProjectSelect,
-  type ProjectGroup,
-  type ProjectSelection,
-} from "@/features/projects/project-select";
+import { ProjectSelect } from "@/features/projects/project-select";
+import type { ConnectedEnvironment } from "@/features/projects/use-connected-environments";
 import { useDraftWorktree } from "@/features/projects/use-draft-worktree";
 
 export function DraftComposer({
   draftModel,
-  group,
-  groups,
+  environmentId,
+  environments,
   models,
+  onEnvironmentChange,
   onModelChange,
   onProjectChange,
   onStart,
+  projects,
   requireProject = false,
   selected,
   startPending,
 }: {
   readonly draftModel: { provider: string; modelId: string } | undefined;
-  /** Label each Environment's group when more than one has projects. */
-  readonly group?: boolean;
-  readonly groups: ReadonlyArray<ProjectGroup>;
+  readonly environmentId: string;
+  readonly environments: ReadonlyArray<ConnectedEnvironment>;
   readonly models: Parameters<typeof ModelSelectorPicker>[0]["models"];
+  readonly onEnvironmentChange: (environmentId: string) => void;
   readonly onModelChange: (provider: string, modelId: string) => void;
-  readonly onProjectChange: (next: ProjectSelection | null) => void;
+  readonly onProjectChange: (next: string | null) => void;
   readonly onStart: (text: string, worktree?: CreateWorktreeInput) => void;
+  readonly projects: ReadonlyArray<Project>;
   /** Linked host — the picker never offers null, so send needs a project. */
   readonly requireProject?: boolean;
-  readonly selected: ProjectSelection | null;
+  readonly selected: Project | null;
   readonly startPending: boolean;
 }) {
-  const draftWorktree = useDraftWorktree(selected?.project ?? null);
-  const commandState = useSlashCommandState(selected?.project.id);
+  const draftWorktree = useDraftWorktree(selected);
+  const commandState = useSlashCommandState(selected?.id);
   const controller = useChatComposerController({
     onSubmit: (text) => {
       if (draftWorktree.gitState === "workspace-unavailable") {
@@ -66,7 +67,7 @@ export function DraftComposer({
     },
   });
   const hasContent = useChatInputHasContent(controller);
-  const selectedId = selected?.project.id ?? null;
+  const selectedId = selected?.id ?? null;
 
   return (
     <div className="flex h-full items-center justify-center p-4">
@@ -77,16 +78,16 @@ export function DraftComposer({
         header={
           <CardFrameHeader className="py-2">
             <div className="-mx-4 flex min-w-0 flex-wrap items-center gap-0">
+              <DraftEnvironmentSelect
+                environments={environments}
+                onChange={onEnvironmentChange}
+                value={environmentId}
+              />
               <ProjectSelect
-                group={group}
-                groups={groups}
                 onChange={onProjectChange}
+                projects={projects}
                 requireProject={requireProject}
-                value={
-                  selected === null
-                    ? null
-                    : { environmentId: selected.environmentId, projectId: selected.project.id }
-                }
+                value={selectedId}
               />
               {draftWorktree.gitState === "not-repository" ? (
                 <span className="text-muted-foreground px-2 text-xs">Not a Git repository</span>
diff --git a/apps/app/src/routes/draft.tsx b/apps/app/src/routes/draft.tsx
index e651186a9..ed1863fe5 100644
--- a/apps/app/src/routes/draft.tsx
+++ b/apps/app/src/routes/draft.tsx
@@ -28,13 +28,17 @@ import { toast } from "sonner";
 import Loader from "@/components/loader";
 import { useChatManager } from "@/features/chat/runtime/chat-context";
 import { ImportProjectDialog } from "@/features/projects/import-project-dialog";
-import type { ProjectGroup, ProjectSelection } from "@/features/projects/project-select";
 import {
   useConnectedEnvironments,
   type ConnectedEnvironment,
 } from "@/features/projects/use-connected-environments";
 import { EnvironmentOrpcProvider, useCatalogOrpc } from "@/lib/environment-orpc";
 
+type DraftProjectGroup = {
+  readonly environmentId: string;
+  readonly projects: ReadonlyArray<Project>;
+};
+
 import { DraftComposer } from "./draft-composer";
 
 type DraftSearch = {
@@ -81,8 +85,8 @@ function DraftRoute() {
 function buildDraftGroups(
   environments: ReadonlyArray<ConnectedEnvironment>,
   projectLists: ReadonlyArray<UseQueryResult<ReadonlyArray<Project>>>,
-): ProjectGroup[] {
-  const groups: ProjectGroup[] = [];
+): DraftProjectGroup[] {
+  const groups: DraftProjectGroup[] = [];
   for (let index = 0; index < environments.length; index += 1) {
     const environment = environments[index];
     const list = projectLists[index]?.data;
@@ -93,28 +97,17 @@ function buildDraftGroups(
     if (projects.length === 0) continue;
     groups.push({
       environmentId: environment.environmentId,
-      environmentTitle: environment.title,
       projects,
     });
   }
   return groups;
 }
 
-/** The picked project plus the Environment that owns it, or null. */
-function findSelection(
-  groups: ReadonlyArray<ProjectGroup>,
+function projectsFor(
+  groups: ReadonlyArray<DraftProjectGroup>,
   environmentId: string,
-  projectId: string | undefined,
-): ProjectSelection | null {
-  if (projectId === undefined) return null;
-  const own = groups.find((group) => group.environmentId === environmentId);
-  const project = own?.projects.find((candidate) => candidate.id === projectId);
-  if (own === undefined || project === undefined) return null;
-  return {
-    environmentId: own.environmentId,
-    environmentTitle: own.environmentTitle,
-    project,
-  };
+): ReadonlyArray<Project> {
+  return groups.find((group) => group.environmentId === environmentId)?.projects ?? [];
 }
 
 function DraftPage({ environmentId }: { readonly environmentId: string }) {
@@ -136,13 +129,14 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
   });
 
   const groups = buildDraftGroups(environments, projectLists);
-  const selected = findSelection(groups, environmentId, search.projectId);
+  const projects = projectsFor(groups, environmentId);
+  const selected = projects.find((project) => project.id === search.projectId) ?? null;
   // Linked host: chat-folder allocation (`~/Pie`) is local-only, so the draft
   // requires an imported Project there.
   const requireProject = environmentId !== localEnvironmentId;
   const modelsQuery = useQuery(
     orpcQueryUtils.agent.listModels.queryOptions({
-      input: selected?.project.id ? { projectId: selected.project.id } : {},
+      input: selected?.id ? { projectId: selected.id } : {},
     }),
   );
   const defaultModel = modelsQuery.data?.defaultModel;
@@ -154,7 +148,7 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
   const startSession = useMutation({
     mutationKey: orpcQueryUtils.agent.session.create.key(),
     mutationFn: async ({ text, worktree }: { text: string; worktree?: CreateWorktreeInput }) => {
-      let projectId = selected?.project.id;
+      let projectId = selected?.id;
       if (projectId === undefined) {
         const allocated = await orpcQueryUtils.project.allocateChatProjectDir.call();
         const projectListKey = orpcQueryUtils.project.list.queryOptions().queryKey;
@@ -251,9 +245,21 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
   return (
     <DraftComposer
       draftModel={draftModel}
-      group={groups.length > 1}
-      groups={groups}
+      environmentId={environmentId}
+      environments={environments}
       models={modelsQuery.data?.models ?? []}
+      onEnvironmentChange={(next) => {
+        navigate({
+          to: "/draft",
+          search: (prev) => {
+            const { projectId: _removed, ...rest } = prev;
+            return { ...rest, environmentId: next };
+          },
+          replace: true,
+        }).catch((error: unknown) => {
+          console.error("Failed to select draft environment", error);
+        });
+      }}
       onModelChange={(provider, modelId) => {
         navigate({
           to: "/draft",
@@ -272,17 +278,14 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
               const { projectId: _removed, environmentId: _dropped, ...rest } = prev;
               return rest;
             }
-            return {
-              ...prev,
-              projectId: next.project.id,
-              environmentId: next.environmentId,
-            };
+            return { ...prev, projectId: next, environmentId };
           },
           replace: true,
         }).catch((error: unknown) => {
           console.error("Failed to select draft project", error);
         });
       }}
+      projects={projects}
       onStart={(text, worktree) => {
         startSession.mutate({
           text,

From 4f920b7d46143c047c5ec31a1c6b2a10fe4b79bf Mon Sep 17 00:00:00 2001
From: dinq <iamdinq@gmail.com>
Date: Sat, 26 Sep 2026 11:29:48 -0400
Subject: [PATCH 3/4] fix(app): group draft projects by Environment in one
 picker

Do not pick an Environment first. The project list splits connected
hosts into labeled groups; choosing a project addresses that host.
---
 .../verify-pie/features/draft-new-chat.md     |   5 +-
 CONTEXT.md                                    |   2 +-
 .../draft-environment-select.test.tsx         |  49 ---------
 .../projects/draft-environment-select.tsx     |  49 ---------
 .../features/projects/project-select.test.tsx |  49 +++++++--
 .../src/features/projects/project-select.tsx  | 101 ++++++++++++------
 apps/app/src/routes/draft-composer.tsx        |  46 ++++----
 apps/app/src/routes/draft.tsx                 |  50 ++++-----
 8 files changed, 150 insertions(+), 201 deletions(-)
 delete mode 100644 apps/app/src/features/projects/draft-environment-select.test.tsx
 delete mode 100644 apps/app/src/features/projects/draft-environment-select.tsx

diff --git a/.agents/skills/verify-pie/features/draft-new-chat.md b/.agents/skills/verify-pie/features/draft-new-chat.md
index 3c87cb104..9a0f9470e 100644
--- a/.agents/skills/verify-pie/features/draft-new-chat.md
+++ b/.agents/skills/verify-pie/features/draft-new-chat.md
@@ -5,8 +5,7 @@ The new-session surface. `/` has no UI — it redirects to `/draft`. A send crea
 ## Sub-features
 
 - **Centered composer** always: project picker, optional git workspace/worktree controls, model select, TipTap input, submit. Zero projects is not an empty state — the picker stays on **Choose project**. Import remains on the sidebar.
-- **Environment picker** — hidden when only this device is connected. When another host is linked, combobox **Environment** lists connected hosts. Picking one writes `?environmentId=` and clears `?projectId=`. The project list is only that Environment's imported projects.
-- **Project picker** — default **Choose project** (no `?projectId=`). The folder icon is part of the trigger. Choosing a project writes `?projectId=` (replace) and keeps the selected Environment. Hovering the picker shows **X** in place of the folder icon; click **X** clears `?projectId=` and drops `?environmentId=` (non-project chats are local). Opening the list shows that Environment's projects, then a **Don't work in a project** button (same clear). On a linked host the picker restricts: no clear, no **Choose project** item, no **Don't work in a project**; send needs a Project.
+- **Project picker** — default **Choose project** (no `?projectId=`). The folder icon is part of the trigger. The list is every connected Environment's imported projects. When more than one Environment has projects, they are split into groups labeled with the Environment title — there is no separate Environment picker. Choosing a project writes `?projectId=` and that Environment's `?environmentId=`. Hovering the picker shows **X**; click **X** clears both (non-project chats are local). Opening the list shows projects, then **Don't work in a project** (same clear).
 - **Choose project send** — `project.allocate` creates `<root>/<YYYY-MM-DD>/Chat-1/` (then `Chat-2`, …), registers it as a Project with `type: "chat"`, then `session.create`. Sidebar **Recent** lists the session (title is the prompt). **Projects** does not show the chat leaf. The picker still lists imported folders only.
 - **Workspace mode** (git repos only, after a real Project is selected): **Current directory** vs **New worktree**. Worktree requires a **base branch** (`aria-label="Base branch for worktree"`). Non-git shows **Not a Git repository**. Missing folder shows **Workspace unavailable** and blocks send.
 - **Model select** — options from Pi `get_available_models`, grouped by provider, trigger shows the model name or **Default**, including when the model list is empty. Default model is written into `?provider=&modelId=` once.
@@ -52,7 +51,7 @@ Worktree path (only if the imported folder is a git repo): switch the workspace
 ## Gotchas
 
 - CDP Enter does **not** submit. Click the arrow button. Draft submit has **no aria-label** — identify it as the composer submit after the field is non-empty.
-- Send is disabled when: input empty, workspace unavailable, create in flight, or worktree mode with no base branch. It is **not** disabled for Choose project on this device. A linked host (`?environmentId=` other than local) restricts the picker: no clear (X), no **Choose project** item, no **Don't work in a project**; send needs a Project.
+- Send is disabled when: input empty, workspace unavailable, create in flight, worktree mode with no base branch, or a linked host with no project selected. It is **not** disabled for Choose project on this device.
 - Model select missing ≠ broken draft. Pi unavailable ⇒ empty list ⇒ component returns `null`.
 - After adding/renaming routes, load `/` through Vite before typechecking (`routeTree.gen.ts` is plugin-generated).
 - Verify sets `PIE_CHAT_PROJECTS_DIR=$PIE_HOME/Pie`. `HOME` and `~/.pi/agent` stay the operator's.
diff --git a/CONTEXT.md b/CONTEXT.md
index 7e37cbeb7..ac29cdd5e 100644
--- a/CONTEXT.md
+++ b/CONTEXT.md
@@ -5,7 +5,7 @@ Glossary of project-specific terms. pie integrates the Pi coding agent into the
 ## Session Domain
 
 **Project**:
-A working directory the user has registered with the server, identified by a server-generated UUID. The single source of the projectId → directory mapping; the directory field is `path`. Registration is the trust boundary for declarative Project-local Pi resources: session children approve prompts, skills, and context from that Project. Automatic Pi extension discovery is disabled for every Pie-owned child because Pie does not yet model inputs that an extension handles without starting a model turn; this intentionally makes discovered global and Project extension commands, tools, hooks, and UI unavailable. The extension request plumbing remains at the Pi protocol seam for compatibility and future explicit extension support. Sessions always resolve their working directory through a Project, never from a caller-supplied path. A session may start without picking an existing Project: `project.allocateChatProjectDir` creates a folder under the **chat-project root**, registers it with `type: "chat"`, then `session.create` uses that id as usual. That path is local-only. The draft picks an Environment first when more than one is connected; the project list is that Environment's imported projects. A linked host requires an imported Project (no clear, no "Don't work in a project"). Chat projects stay off the **Projects** sidebar and picker; their sessions appear under **Recent**.
+A working directory the user has registered with the server, identified by a server-generated UUID. The single source of the projectId → directory mapping; the directory field is `path`. Registration is the trust boundary for declarative Project-local Pi resources: session children approve prompts, skills, and context from that Project. Automatic Pi extension discovery is disabled for every Pie-owned child because Pie does not yet model inputs that an extension handles without starting a model turn; this intentionally makes discovered global and Project extension commands, tools, hooks, and UI unavailable. The extension request plumbing remains at the Pi protocol seam for compatibility and future explicit extension support. Sessions always resolve their working directory through a Project, never from a caller-supplied path. A session may start without picking an existing Project: `project.allocateChatProjectDir` creates a folder under the **chat-project root**, registers it with `type: "chat"`, then `session.create` uses that id as usual. That path is local-only. The draft project picker lists every connected Environment's imported projects, split into groups labeled by Environment when more than one has projects. Picking a project addresses that Environment. A linked host still cannot allocate a non-project chat. Chat projects stay off the **Projects** sidebar and picker; their sessions appear under **Recent**.
 _Avoid_: workspace, repo, cwd (for the Project field)
 
 **Chat-project root**:
diff --git a/apps/app/src/features/projects/draft-environment-select.test.tsx b/apps/app/src/features/projects/draft-environment-select.test.tsx
deleted file mode 100644
index 99d8c9710..000000000
--- a/apps/app/src/features/projects/draft-environment-select.test.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { render } from "vitest-browser-react";
-import { page } from "vitest/browser";
-
-import { DraftEnvironmentSelect } from "./draft-environment-select";
-import type { ConnectedEnvironment } from "./use-connected-environments";
-
-const environment = (
-  environmentId: string,
-  title: string,
-  kind: ConnectedEnvironment["kind"],
-): ConnectedEnvironment => ({
-  environmentId,
-  title,
-  description: kind === "local" ? "This device" : environmentId,
-  kind,
-});
-
-describe("DraftEnvironmentSelect", () => {
-  it("stays hidden when only this device is connected", async () => {
-    await render(
-      <DraftEnvironmentSelect
-        environments={[environment("local", "This device", "local")]}
-        onChange={() => {}}
-        value="local"
-      />,
-    );
-    expect(document.querySelector('[aria-label="Environment"]')).toBeNull();
-  });
-
-  it("lists connected environments and emits the picked id", async () => {
-    const picked: string[] = [];
-    await render(
-      <DraftEnvironmentSelect
-        environments={[
-          environment("local", "This device", "local"),
-          environment("remote", "macbook-pro-m1", "remote"),
-        ]}
-        onChange={(environmentId) => {
-          picked.push(environmentId);
-        }}
-        value="local"
-      />,
-    );
-    await page.getByRole("combobox", { name: "Environment" }).click();
-    await page.getByText("macbook-pro-m1").click();
-    expect(picked).toEqual(["remote"]);
-  });
-});
diff --git a/apps/app/src/features/projects/draft-environment-select.tsx b/apps/app/src/features/projects/draft-environment-select.tsx
deleted file mode 100644
index d33b7bb35..000000000
--- a/apps/app/src/features/projects/draft-environment-select.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@getpie/ui/components/select";
-
-import type { ConnectedEnvironment } from "./use-connected-environments";
-
-/** Draft environment pick. Hidden when only this device is connected. */
-export function DraftEnvironmentSelect({
-  environments,
-  onChange,
-  value,
-}: {
-  environments: ReadonlyArray<ConnectedEnvironment>;
-  onChange: (environmentId: string) => void;
-  value: string;
-}) {
-  if (environments.length < 2) return null;
-  return (
-    <Select
-      items={environments.map((environment) => ({
-        label: environment.title,
-        value: environment.environmentId,
-      }))}
-      onValueChange={(next) => {
-        if (typeof next === "string") onChange(next);
-      }}
-      value={value}
-    >
-      <SelectTrigger
-        aria-label="Environment"
-        className="hover:bg-accent w-auto max-w-56 min-w-0 justify-self-start border-transparent bg-transparent shadow-none before:hidden dark:bg-transparent"
-        size="sm"
-      >
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent>
-        {environments.map((environment) => (
-          <SelectItem key={environment.environmentId} value={environment.environmentId}>
-            {environment.title}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
diff --git a/apps/app/src/features/projects/project-select.test.tsx b/apps/app/src/features/projects/project-select.test.tsx
index 60285341e..53ec76568 100644
--- a/apps/app/src/features/projects/project-select.test.tsx
+++ b/apps/app/src/features/projects/project-select.test.tsx
@@ -1,9 +1,9 @@
 import type { Project } from "@getpie/contract";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { render } from "vitest-browser-react";
 import { page } from "vitest/browser";
 
-import { ProjectSelect } from "./project-select";
+import { ProjectSelect, type ProjectGroup, type ProjectSelection } from "./project-select";
 
 const project = (id: string): Project => ({
   id,
@@ -12,28 +12,55 @@ const project = (id: string): Project => ({
   createdAt: "2026-01-01T00:00:00.000Z",
 });
 
-const projects = [project("p-one"), project("p-two")];
+const localGroup: ProjectGroup = {
+  environmentId: "env-local",
+  environmentTitle: "This device",
+  projects: [project("p-one"), project("p-two")],
+};
+
+const remoteGroup: ProjectGroup = {
+  environmentId: "env-remote",
+  environmentTitle: "macbook-pro-m1",
+  projects: [project("p-r1")],
+};
 
 async function openPicker(): Promise<void> {
   await page.getByRole("combobox").click();
 }
 
 describe("ProjectSelect", () => {
-  it("keeps null mode locally: clear affordance and Don't-work button", async () => {
-    await render(<ProjectSelect onChange={() => {}} projects={projects} value="p-one" />);
-    expect(document.querySelector('[aria-label="Clear project"]')).not.toBeNull();
+  it("keeps a single Environment unlabeled", async () => {
+    await render(
+      <ProjectSelect
+        groups={[localGroup]}
+        onChange={() => {}}
+        value={{ environmentId: "env-local", projectId: "p-one" }}
+      />,
+    );
     await openPicker();
     expect(document.body.textContent).toContain("p-two");
     expect(document.body.textContent).toContain("Don't work in a project");
+    expect(document.body.textContent).not.toContain("This device");
   });
 
-  it("requireProject (linked host) hides every path back to null", async () => {
+  it("splits projects by Environment and emits the owning id", async () => {
+    const onChange = vi.fn<(next: ProjectSelection | null) => void>();
     await render(
-      <ProjectSelect onChange={() => {}} projects={projects} requireProject value="p-one" />,
+      <ProjectSelect
+        groups={[localGroup, remoteGroup]}
+        onChange={onChange}
+        value={{ environmentId: "env-local", projectId: "p-one" }}
+      />,
     );
-    expect(document.querySelector('[aria-label="Clear project"]')).toBeNull();
     await openPicker();
-    expect(document.body.textContent).toContain("p-two");
-    expect(document.body.textContent).not.toContain("Don't work in a project");
+    expect(document.body.textContent).toContain("This device");
+    expect(document.body.textContent).toContain("macbook-pro-m1");
+    await page.getByText("p-r1").click();
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        environmentId: "env-remote",
+        project: expect.objectContaining({ id: "p-r1" }),
+      }),
+    );
   });
 });
diff --git a/apps/app/src/features/projects/project-select.tsx b/apps/app/src/features/projects/project-select.tsx
index 49d6585a0..ac5620690 100644
--- a/apps/app/src/features/projects/project-select.tsx
+++ b/apps/app/src/features/projects/project-select.tsx
@@ -3,6 +3,8 @@ import { Button } from "@getpie/ui/components/button";
 import {
   Select,
   SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
   SelectItem,
   SelectSeparator,
   SelectTrigger,
@@ -14,23 +16,40 @@ import { useState } from "react";
 /** Sentinel that is not a project UUID — `allocateChatProjectDir` on send. */
 const NEW_FOLDER_VALUE = "new-folder";
 
-// Draft project picker for the selected Environment. `null` / Choose project →
-// allocate under `~/Pie` on send. `requireProject` (linked host): no null mode,
-// because chat-folder allocation is local-only.
+/** One Environment's imported projects, in switcher order. */
+export type ProjectGroup = {
+  readonly environmentId: string;
+  readonly environmentTitle: string;
+  readonly projects: ReadonlyArray<Project>;
+};
+
+/** A pick names the project and the Environment that owns it. */
+export type ProjectSelection = {
+  readonly environmentId: string;
+  readonly project: Project;
+};
+
+const selectionValue = (environmentId: string, projectId: string): string =>
+  `${environmentId}:${projectId}`;
+
+// One picker. Multiple Environments are groups inside it — not a prior
+// environment select. `null` / Choose project allocates under `~/Pie` locally.
 export function ProjectSelect({
+  groups,
   onChange,
-  projects,
-  requireProject = false,
   value,
 }: {
-  onChange: (projectId: string | null) => void;
-  projects: ReadonlyArray<Project>;
-  requireProject?: boolean;
-  value: string | null;
+  readonly groups: ReadonlyArray<ProjectGroup>;
+  onChange: (next: ProjectSelection | null) => void;
+  readonly value: { environmentId: string; projectId: string } | null;
 }) {
   const [hovered, setHovered] = useState(false);
   const [open, setOpen] = useState(false);
-  const selected = projects.find((project) => project.id === value);
+  const labeled = groups.length > 1;
+  const selectedGroup = groups.find((entry) => entry.environmentId === value?.environmentId);
+  const selectedProject = selectedGroup?.projects.find(
+    (project) => project.id === value?.projectId,
+  );
 
   return (
     <div
@@ -48,29 +67,43 @@ export function ProjectSelect({
     >
       <Select
         items={[
-          ...(requireProject ? [] : [{ label: "Choose project", value: NEW_FOLDER_VALUE }]),
-          ...projects.map((project) => ({ label: project.name, value: project.id })),
+          { label: "Choose project", value: NEW_FOLDER_VALUE },
+          ...groups.flatMap((entry) =>
+            entry.projects.map((project) => ({
+              label: project.name,
+              value: selectionValue(entry.environmentId, project.id),
+            })),
+          ),
         ]}
         onOpenChange={setOpen}
         onValueChange={(next) => {
-          if (next === NEW_FOLDER_VALUE) onChange(null);
-          else if (typeof next === "string") onChange(next);
+          if (next === NEW_FOLDER_VALUE) {
+            onChange(null);
+            return;
+          }
+          for (const entry of groups) {
+            const project = entry.projects.find(
+              (candidate) => selectionValue(entry.environmentId, candidate.id) === next,
+            );
+            if (project !== undefined) {
+              onChange({ environmentId: entry.environmentId, project });
+              return;
+            }
+          }
         }}
         open={open}
-        value={value ?? NEW_FOLDER_VALUE}
+        value={
+          value === null ? NEW_FOLDER_VALUE : selectionValue(value.environmentId, value.projectId)
+        }
       >
-        {/* The name is only the folder's basename, so two projects can share one —
-          the path is what actually tells them apart. */}
-        {/* The draft header row owns the edge bleed (-mx-4) for every pick; a
-          trigger-level margin would stack with it and poke past the card. */}
         <SelectTrigger
           className="hover:bg-accent w-auto max-w-56 min-w-0 justify-self-start border-transparent bg-transparent shadow-none before:hidden dark:bg-transparent [&_[data-slot=select-icon]]:hidden"
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
           size="sm"
-          title={selected?.path}
+          title={selectedProject?.path}
         >
-          {value !== null && !requireProject ? (
+          {value !== null ? (
             <span
               aria-label="Clear project"
               className={
@@ -88,17 +121,25 @@ export function ProjectSelect({
           <SelectValue placeholder="Choose project" />
         </SelectTrigger>
         <SelectContent>
-          {projects.map((project) => (
-            <SelectItem key={project.id} value={project.id}>
-              <span className="flex min-w-0 flex-col">
-                <span className="truncate">{project.name}</span>
-                <span className="text-muted-foreground truncate text-xs">{project.path}</span>
-              </span>
-            </SelectItem>
+          {groups.map((entry) => (
+            <SelectGroup key={entry.environmentId}>
+              {labeled ? <SelectGroupLabel>{entry.environmentTitle}</SelectGroupLabel> : null}
+              {entry.projects.map((project) => (
+                <SelectItem
+                  key={selectionValue(entry.environmentId, project.id)}
+                  value={selectionValue(entry.environmentId, project.id)}
+                >
+                  <span className="flex min-w-0 flex-col">
+                    <span className="truncate">{project.name}</span>
+                    <span className="text-muted-foreground truncate text-xs">{project.path}</span>
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectGroup>
           ))}
-          {value !== null && !requireProject ? (
+          {value !== null ? (
             <>
-              {projects.length > 0 ? <SelectSeparator /> : null}
+              {groups.length > 0 ? <SelectSeparator /> : null}
               <Button
                 className="w-full justify-start"
                 onClick={() => {
diff --git a/apps/app/src/routes/draft-composer.tsx b/apps/app/src/routes/draft-composer.tsx
index 655383de6..3748aff18 100644
--- a/apps/app/src/routes/draft-composer.tsx
+++ b/apps/app/src/routes/draft-composer.tsx
@@ -1,4 +1,4 @@
-import type { CreateWorktreeInput, Project } from "@getpie/contract";
+import type { CreateWorktreeInput } from "@getpie/contract";
 import { PromptInputSubmit } from "@getpie/ui/ai-elements/prompt-input";
 import { CardFrameHeader } from "@getpie/ui/components/card";
 import { toast } from "sonner";
@@ -9,46 +9,42 @@ import { SlashCommandMenu } from "@/features/chat/components/input/slash-command
 import { useChatComposerController } from "@/features/chat/components/input/use-chat-composer-controller";
 import { useChatInputHasContent } from "@/features/chat/components/input/use-chat-input-has-content";
 import { useSlashCommandState } from "@/features/chat/hooks/use-slash-command-state";
-import { DraftEnvironmentSelect } from "@/features/projects/draft-environment-select";
 import {
   DraftWorkspaceSelect,
   type DraftWorkspaceMode,
 } from "@/features/projects/draft-workspace-select";
 import { DraftWorktreeBaseSelect } from "@/features/projects/draft-worktree-base-select";
-import { ProjectSelect } from "@/features/projects/project-select";
-import type { ConnectedEnvironment } from "@/features/projects/use-connected-environments";
+import {
+  ProjectSelect,
+  type ProjectGroup,
+  type ProjectSelection,
+} from "@/features/projects/project-select";
 import { useDraftWorktree } from "@/features/projects/use-draft-worktree";
 
 export function DraftComposer({
   draftModel,
-  environmentId,
-  environments,
+  groups,
   models,
-  onEnvironmentChange,
   onModelChange,
   onProjectChange,
   onStart,
-  projects,
   requireProject = false,
   selected,
   startPending,
 }: {
   readonly draftModel: { provider: string; modelId: string } | undefined;
-  readonly environmentId: string;
-  readonly environments: ReadonlyArray<ConnectedEnvironment>;
+  readonly groups: ReadonlyArray<ProjectGroup>;
   readonly models: Parameters<typeof ModelSelectorPicker>[0]["models"];
-  readonly onEnvironmentChange: (environmentId: string) => void;
   readonly onModelChange: (provider: string, modelId: string) => void;
-  readonly onProjectChange: (next: string | null) => void;
+  readonly onProjectChange: (next: ProjectSelection | null) => void;
   readonly onStart: (text: string, worktree?: CreateWorktreeInput) => void;
-  readonly projects: ReadonlyArray<Project>;
-  /** Linked host — the picker never offers null, so send needs a project. */
+  /** Linked host with no Project — do not allocate a chat folder there. */
   readonly requireProject?: boolean;
-  readonly selected: Project | null;
+  readonly selected: ProjectSelection | null;
   readonly startPending: boolean;
 }) {
-  const draftWorktree = useDraftWorktree(selected);
-  const commandState = useSlashCommandState(selected?.id);
+  const draftWorktree = useDraftWorktree(selected?.project ?? null);
+  const commandState = useSlashCommandState(selected?.project.id);
   const controller = useChatComposerController({
     onSubmit: (text) => {
       if (draftWorktree.gitState === "workspace-unavailable") {
@@ -67,7 +63,7 @@ export function DraftComposer({
     },
   });
   const hasContent = useChatInputHasContent(controller);
-  const selectedId = selected?.id ?? null;
+  const selectedId = selected?.project.id ?? null;
 
   return (
     <div className="flex h-full items-center justify-center p-4">
@@ -78,16 +74,14 @@ export function DraftComposer({
         header={
           <CardFrameHeader className="py-2">
             <div className="-mx-4 flex min-w-0 flex-wrap items-center gap-0">
-              <DraftEnvironmentSelect
-                environments={environments}
-                onChange={onEnvironmentChange}
-                value={environmentId}
-              />
               <ProjectSelect
+                groups={groups}
                 onChange={onProjectChange}
-                projects={projects}
-                requireProject={requireProject}
-                value={selectedId}
+                value={
+                  selected === null
+                    ? null
+                    : { environmentId: selected.environmentId, projectId: selected.project.id }
+                }
               />
               {draftWorktree.gitState === "not-repository" ? (
                 <span className="text-muted-foreground px-2 text-xs">Not a Git repository</span>
diff --git a/apps/app/src/routes/draft.tsx b/apps/app/src/routes/draft.tsx
index ed1863fe5..7b0fbd5a6 100644
--- a/apps/app/src/routes/draft.tsx
+++ b/apps/app/src/routes/draft.tsx
@@ -28,17 +28,13 @@ import { toast } from "sonner";
 import Loader from "@/components/loader";
 import { useChatManager } from "@/features/chat/runtime/chat-context";
 import { ImportProjectDialog } from "@/features/projects/import-project-dialog";
+import type { ProjectGroup, ProjectSelection } from "@/features/projects/project-select";
 import {
   useConnectedEnvironments,
   type ConnectedEnvironment,
 } from "@/features/projects/use-connected-environments";
 import { EnvironmentOrpcProvider, useCatalogOrpc } from "@/lib/environment-orpc";
 
-type DraftProjectGroup = {
-  readonly environmentId: string;
-  readonly projects: ReadonlyArray<Project>;
-};
-
 import { DraftComposer } from "./draft-composer";
 
 type DraftSearch = {
@@ -85,8 +81,8 @@ function DraftRoute() {
 function buildDraftGroups(
   environments: ReadonlyArray<ConnectedEnvironment>,
   projectLists: ReadonlyArray<UseQueryResult<ReadonlyArray<Project>>>,
-): DraftProjectGroup[] {
-  const groups: DraftProjectGroup[] = [];
+): ProjectGroup[] {
+  const groups: ProjectGroup[] = [];
   for (let index = 0; index < environments.length; index += 1) {
     const environment = environments[index];
     const list = projectLists[index]?.data;
@@ -97,17 +93,23 @@ function buildDraftGroups(
     if (projects.length === 0) continue;
     groups.push({
       environmentId: environment.environmentId,
+      environmentTitle: environment.title,
       projects,
     });
   }
   return groups;
 }
 
-function projectsFor(
-  groups: ReadonlyArray<DraftProjectGroup>,
+function findSelection(
+  groups: ReadonlyArray<ProjectGroup>,
   environmentId: string,
-): ReadonlyArray<Project> {
-  return groups.find((group) => group.environmentId === environmentId)?.projects ?? [];
+  projectId: string | undefined,
+): ProjectSelection | null {
+  if (projectId === undefined) return null;
+  const own = groups.find((group) => group.environmentId === environmentId);
+  const project = own?.projects.find((candidate) => candidate.id === projectId);
+  if (project === undefined) return null;
+  return { environmentId, project };
 }
 
 function DraftPage({ environmentId }: { readonly environmentId: string }) {
@@ -129,14 +131,13 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
   });
 
   const groups = buildDraftGroups(environments, projectLists);
-  const projects = projectsFor(groups, environmentId);
-  const selected = projects.find((project) => project.id === search.projectId) ?? null;
+  const selected = findSelection(groups, environmentId, search.projectId);
   // Linked host: chat-folder allocation (`~/Pie`) is local-only, so the draft
   // requires an imported Project there.
   const requireProject = environmentId !== localEnvironmentId;
   const modelsQuery = useQuery(
     orpcQueryUtils.agent.listModels.queryOptions({
-      input: selected?.id ? { projectId: selected.id } : {},
+      input: selected !== null ? { projectId: selected.project.id } : {},
     }),
   );
   const defaultModel = modelsQuery.data?.defaultModel;
@@ -148,7 +149,7 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
   const startSession = useMutation({
     mutationKey: orpcQueryUtils.agent.session.create.key(),
     mutationFn: async ({ text, worktree }: { text: string; worktree?: CreateWorktreeInput }) => {
-      let projectId = selected?.id;
+      let projectId = selected?.project.id;
       if (projectId === undefined) {
         const allocated = await orpcQueryUtils.project.allocateChatProjectDir.call();
         const projectListKey = orpcQueryUtils.project.list.queryOptions().queryKey;
@@ -245,21 +246,8 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
   return (
     <DraftComposer
       draftModel={draftModel}
-      environmentId={environmentId}
-      environments={environments}
+      groups={groups}
       models={modelsQuery.data?.models ?? []}
-      onEnvironmentChange={(next) => {
-        navigate({
-          to: "/draft",
-          search: (prev) => {
-            const { projectId: _removed, ...rest } = prev;
-            return { ...rest, environmentId: next };
-          },
-          replace: true,
-        }).catch((error: unknown) => {
-          console.error("Failed to select draft environment", error);
-        });
-      }}
       onModelChange={(provider, modelId) => {
         navigate({
           to: "/draft",
@@ -274,18 +262,16 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
           to: "/draft",
           search: (prev) => {
             if (next === null) {
-              // Non-project chats allocate locally — drop the environment hint.
               const { projectId: _removed, environmentId: _dropped, ...rest } = prev;
               return rest;
             }
-            return { ...prev, projectId: next, environmentId };
+            return { ...prev, projectId: next.project.id, environmentId: next.environmentId };
           },
           replace: true,
         }).catch((error: unknown) => {
           console.error("Failed to select draft project", error);
         });
       }}
-      projects={projects}
       onStart={(text, worktree) => {
         startSession.mutate({
           text,

From 487bdc7d269c6b26a3857c613fb301c1eb6c7563 Mon Sep 17 00:00:00 2001
From: dinq <iamdinq@gmail.com>
Date: Thu, 1 Oct 2026 00:40:17 -0400
Subject: [PATCH 4/4] fix(app): preserve draft while remote projects load

---
 apps/app/src/routes/-draft-loading.test.tsx | 149 ++++++++++++++++++++
 apps/app/src/routes/draft.tsx               |   6 +-
 2 files changed, 152 insertions(+), 3 deletions(-)
 create mode 100644 apps/app/src/routes/-draft-loading.test.tsx

diff --git a/apps/app/src/routes/-draft-loading.test.tsx b/apps/app/src/routes/-draft-loading.test.tsx
new file mode 100644
index 000000000..fd091cf02
--- /dev/null
+++ b/apps/app/src/routes/-draft-loading.test.tsx
@@ -0,0 +1,149 @@
+import type { Project } from "@getpie/contract";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  createMemoryHistory,
+  createRootRouteWithContext,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from "@tanstack/react-router";
+import { expect, it } from "vitest";
+import { render } from "vitest-browser-react";
+import { page } from "vitest/browser";
+
+import { ChatManagerContext } from "@/features/chat/runtime/chat-context";
+import { createEnvironmentRpc } from "@/lib/environment-rpc";
+import type { EnvironmentSnapshot } from "@/platform";
+import { PlatformProvider } from "@/platform-provider";
+import { Route as DraftRoute } from "@/routes/draft";
+
+import "@/index.css";
+
+it.each(["resolve", "reject"])(
+  "preserves the real draft editor while a newly connected Environment loads and %ss",
+  async (outcome) => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    const localProject: Project = {
+      id: "local-project",
+      name: "Local project",
+      path: "/tmp/draft-loading-project",
+      createdAt: "2026-01-01T00:00:00.000Z",
+    };
+    let resolveRemote = (_projects: readonly Project[]): void => {};
+    let rejectRemote = (_error: Error): void => {};
+    const remoteProjects = new Promise<readonly Project[]>((resolve, reject) => {
+      resolveRemote = resolve;
+      rejectRemote = reject;
+    });
+    let snapshot: EnvironmentSnapshot = { revision: 0, connecting: [], remotes: [] };
+    const listeners = new Set<(next: EnvironmentSnapshot) => void>();
+    const connection = {
+      httpBaseUrl: "http://127.0.0.1:1",
+      wsBaseUrl: "ws://127.0.0.1:1",
+      token: "test-only",
+    };
+    const environmentRpc = createEnvironmentRpc({
+      localId: "local",
+      queryClient,
+      resolveRemote: () => connection,
+      createRemoteLink: () => ({ call: async () => remoteProjects }),
+      localLink: {
+        call: async (path) => {
+          switch (path.join(".")) {
+            case "project.list":
+              return [localProject];
+            case "agent.listModels":
+              return { models: [] };
+            case "agent.commands":
+              return [];
+            case "git.branch":
+              return { kind: "not-repository" };
+            default:
+              throw new Error(`Unexpected RPC: ${path.join(".")}`);
+          }
+        },
+      },
+    });
+    const context = { localEnvironmentId: "local", environmentRpc };
+    const root = createRootRouteWithContext<typeof context>()({
+      component: () => (
+        <PlatformProvider
+          value={{
+            ssh: {
+              client: { available: true },
+              environments: {
+                getSnapshot: () => snapshot,
+                subscribe: (listener) => {
+                  listeners.add(listener);
+                  return () => listeners.delete(listener);
+                },
+              },
+              discoverHosts: async () => [],
+              connect: async () => {},
+              remove: async () => {},
+            },
+          }}
+        >
+          <ChatManagerContext
+            value={{
+              chatFor: () => {
+                throw new Error("This test must not create a Session");
+              },
+            }}
+          >
+            <Outlet />
+          </ChatManagerContext>
+        </PlatformProvider>
+      ),
+    });
+    const draft = createRoute({
+      getParentRoute: () => root,
+      path: "draft",
+      component: DraftRoute.options.component,
+      validateSearch: DraftRoute.options.validateSearch,
+    });
+    const router = createRouter({
+      routeTree: root.addChildren([draft]),
+      context,
+      history: createMemoryHistory({ initialEntries: ["/draft?projectId=local-project"] }),
+    });
+    await router.load();
+    const view = await render(
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>,
+    );
+    try {
+      const editor = page.getByRole("textbox", { name: "Message" });
+      await editor.fill("Keep this unsent draft");
+      const originalEditor = editor.element();
+      const originalText = originalEditor.textContent ?? "";
+      expect(originalText).toContain("Keep this unsent draft");
+      snapshot = {
+        revision: 1,
+        connecting: [],
+        remotes: [
+          { id: "remote", environmentId: "remote", alias: "remote", label: "Remote", connection },
+        ],
+      };
+      for (const listener of listeners) listener(snapshot);
+      const remoteKey = environmentRpc.for("remote").project.list.queryOptions().queryKey;
+      await expect.poll(() => queryClient.getQueryState(remoteKey)?.fetchStatus).toBe("fetching");
+      await expect.element(editor).toHaveTextContent(originalText);
+      expect(editor.element()).toBe(originalEditor);
+      if (outcome === "resolve") resolveRemote([]);
+      else rejectRemote(new Error("Remote unavailable"));
+      await expect
+        .poll(() => queryClient.getQueryState(remoteKey)?.status)
+        .toBe(outcome === "resolve" ? "success" : "error");
+      await expect.element(editor).toHaveTextContent(originalText);
+      expect(editor.element()).toBe(originalEditor);
+      expect(document.querySelector('button[type="submit"]')).not.toBeDisabled();
+    } finally {
+      resolveRemote([]);
+      await view.unmount();
+      queryClient.clear();
+    }
+  },
+);
diff --git a/apps/app/src/routes/draft.tsx b/apps/app/src/routes/draft.tsx
index 7b0fbd5a6..781dadb7f 100644
--- a/apps/app/src/routes/draft.tsx
+++ b/apps/app/src/routes/draft.tsx
@@ -212,12 +212,12 @@ function DraftPage({ environmentId }: { readonly environmentId: string }) {
     },
   });
 
-  if (projectLists.some((list) => list.isPending)) {
+  const ownList =
+    projectLists[environments.findIndex((entry) => entry.environmentId === environmentId)];
+  if (ownList?.isPending || (groups.length === 0 && projectLists.some((list) => list.isPending))) {
     return <Loader />;
   }
 
-  const ownList =
-    projectLists[environments.findIndex((entry) => entry.environmentId === environmentId)];
   if (ownList?.isError) {
     return (
       <DraftProjectsError message={ownList.error.message} onRetry={() => void ownList.refetch()} />