From 0bca90cbfc12f7f6d76d88af83436ab0285cb6ab Mon Sep 17 00:00:00 2001
From: maria-rcks <mwria.rocks@gmail.com>
Date: Fri, 11 Sep 2026 22:25:42 +0000
Subject: [PATCH 1/4] feat(web): show which environment a project lives in
 inside project pickers

Two projects with the same name on two machines were indistinguishable in the
sidebar project scope dropdown and in the new-thread headline picker. Once the
catalog spans more than one environment, each row now carries a muted
environment label ("Local", the saved environment label, or both for a project
grouped across machines) with the machine icon used elsewhere. The sidebar
search also matches those labels and the scoped trigger repeats the label.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../components/ProjectEnvironmentLabel.tsx    | 49 ++++++++++++++++
 apps/web/src/components/Sidebar.tsx           | 56 +++++++++++++++++--
 .../src/components/chat/DraftHeroHeadline.tsx | 42 +++++++++++++-
 .../settings/scopedSettings.test.ts           |  1 +
 .../components/settings/settingsScope.test.ts |  1 +
 apps/web/src/environmentGrouping.test.ts      | 38 +++++++++++++
 apps/web/src/sidebarProjectGrouping.ts        | 28 ++++++++++
 7 files changed, 209 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/components/ProjectEnvironmentLabel.tsx

diff --git a/apps/web/src/components/ProjectEnvironmentLabel.tsx b/apps/web/src/components/ProjectEnvironmentLabel.tsx
new file mode 100644
index 000000000000..b7d6e55529af
--- /dev/null
+++ b/apps/web/src/components/ProjectEnvironmentLabel.tsx
@@ -0,0 +1,49 @@
+import type { EnvironmentId, EnvironmentMachineKind } from "@t3tools/contracts";
+
+import { cn } from "~/lib/utils";
+import type { SidebarProjectSnapshot } from "~/sidebarProjectGrouping";
+import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+
+/**
+ * Machine icon for a project group's row: the first non-primary member's
+ * machine, or none when the group only lives on this device. Matches the
+ * thread rows and command palette, which draw an icon for remote work only.
+ */
+export function resolveProjectGroupMachine(input: {
+  readonly group: Pick<SidebarProjectSnapshot, "memberProjects">;
+  readonly primaryEnvironmentId: EnvironmentId | null;
+  readonly machineByEnvironmentId: ReadonlyMap<EnvironmentId, EnvironmentMachineKind>;
+}): EnvironmentMachineKind | null {
+  const remoteMember = input.group.memberProjects.find(
+    (member) => member.environmentId !== input.primaryEnvironmentId,
+  );
+  return remoteMember
+    ? (input.machineByEnvironmentId.get(remoteMember.environmentId) ?? null)
+    : null;
+}
+
+/**
+ * Muted "where this project lives" suffix for a project picker row. Callers
+ * render it only while the catalog spans environments (see
+ * projectGroupsSpanEnvironments), so single-machine users see no change.
+ */
+export function ProjectEnvironmentLabel(props: {
+  readonly labels: readonly string[];
+  readonly machine: EnvironmentMachineKind | null;
+  readonly className?: string;
+}) {
+  if (props.labels.length === 0) return null;
+  return (
+    <span
+      className={cn(
+        "ml-auto flex min-w-0 max-w-[40%] shrink-0 items-center gap-1 font-normal text-muted-foreground text-xs",
+        props.className,
+      )}
+    >
+      {props.machine ? (
+        <EnvironmentMachineIcon aria-hidden kind={props.machine} className="size-3 shrink-0" />
+      ) : null}
+      <span className="truncate">{props.labels.join(" · ")}</span>
+    </span>
+  );
+}
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index c269b73ee761..e84bbbdbbd61 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -104,6 +104,7 @@ import {
 import { getProjectOrderKey, selectProjectGroupingSettings } from "../logicalProject";
 import {
   buildSidebarProjectSnapshots,
+  projectGroupsSpanEnvironments,
   type SidebarProjectSnapshot,
 } from "../sidebarProjectGrouping";
 import { legacyProjectCwdPreferenceKey, useUiStateStore } from "../uiStateStore";
@@ -141,6 +142,7 @@ import type { SidebarThreadSummary } from "../types";
 import type { EnvironmentProject } from "@t3tools/client-runtime/state/shell";
 import { cn } from "~/lib/utils";
 import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+import { ProjectEnvironmentLabel, resolveProjectGroupMachine } from "./ProjectEnvironmentLabel";
 import { buildThreadActionMenuItems } from "./threadActionMenu.logic";
 import {
   animateSidebarLayoutChanges,
@@ -2333,14 +2335,22 @@ export default function Sidebar() {
   // while the popup search filters the same collection.
   const projectScopeItems = useMemo(
     () => [
-      { value: "all", label: "All projects" },
+      { value: "all", label: "All projects", environmentLabels: [] as readonly string[] },
       ...projectGroups.map((project) => ({
         value: project.projectKey,
         label: project.displayName,
+        environmentLabels: project.environmentLabels,
       })),
     ],
     [projectGroups],
   );
+  // Same-named projects on two machines are only told apart by where they
+  // live, so rows carry their environment once the catalog spans more than
+  // one; a single-machine catalog stays as it was.
+  const showProjectEnvironments = useMemo(
+    () => projectGroupsSpanEnvironments(projectGroups),
+    [projectGroups],
+  );
   const projectGroupByScopeKey = useMemo(
     () => new Map(projectGroups.map((project) => [project.projectKey, project] as const)),
     [projectGroups],
@@ -2370,9 +2380,19 @@ export default function Sidebar() {
         activeScopeKey: projectScopeKey,
         query: projectScopeMenuState.query,
         matches: (item, query) =>
-          projectScopeFilter.contains(item, query, (candidate) => candidate.label),
+          projectScopeFilter.contains(item, query, (candidate) => candidate.label) ||
+          (showProjectEnvironments &&
+            item.environmentLabels.some((label) =>
+              projectScopeFilter.contains(label, query, (candidate) => candidate),
+            )),
       }),
-    [projectScopeFilter, projectScopeItems, projectScopeKey, projectScopeMenuState.query],
+    [
+      projectScopeFilter,
+      projectScopeItems,
+      projectScopeKey,
+      projectScopeMenuState.query,
+      showProjectEnvironments,
+    ],
   );
   const scopedProjectGroup = useMemo(
     () =>
@@ -4449,11 +4469,29 @@ export default function Sidebar() {
                     <span className="min-w-0 flex-1 truncate">
                       {scopedProjectGroup?.displayName ?? "All projects"}
                     </span>
+                    {scopedProjectGroup && showProjectEnvironments ? (
+                      <ProjectEnvironmentLabel
+                        labels={scopedProjectGroup.environmentLabels}
+                        machine={resolveProjectGroupMachine({
+                          group: scopedProjectGroup,
+                          primaryEnvironmentId,
+                          machineByEnvironmentId: environmentMachineById,
+                        })}
+                      />
+                    ) : null}
                     <ChevronDownIcon className="-mr-px size-4 shrink-0" />
                   </ComboboxTrigger>
                   <ComboboxPopup
                     align="start"
-                    className="w-(--anchor-width) min-w-0 overflow-hidden"
+                    // Anchor-wide by default; grows past the trigger only when
+                    // rows carry environment labels, up to 20rem, so a project
+                    // name and where it lives both stay readable.
+                    className={cn(
+                      "min-w-0 overflow-hidden",
+                      showProjectEnvironments
+                        ? "w-max min-w-(--anchor-width) max-w-80"
+                        : "w-(--anchor-width)",
+                    )}
                   >
                     <ComboboxSearchInput
                       aria-label="Search projects"
@@ -4504,6 +4542,16 @@ export default function Sidebar() {
                               <FolderIcon className="size-4 shrink-0" />
                             )}
                             <span className="min-w-0 flex-1 truncate text-sm">{item.label}</span>
+                            {project && showProjectEnvironments ? (
+                              <ProjectEnvironmentLabel
+                                labels={project.environmentLabels}
+                                machine={resolveProjectGroupMachine({
+                                  group: project,
+                                  primaryEnvironmentId,
+                                  machineByEnvironmentId: environmentMachineById,
+                                })}
+                              />
+                            ) : null}
                             {project ? (
                               <Button
                                 size="icon-xs"
diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx
index 1e0d295c098f..927c5953d332 100644
--- a/apps/web/src/components/chat/DraftHeroHeadline.tsx
+++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx
@@ -1,6 +1,6 @@
 import type { DraftId } from "~/composerDraftStore";
 import { useComposerDraftStore } from "~/composerDraftStore";
-import type { ScopedProjectRef } from "@t3tools/contracts";
+import { resolveEnvironmentMachineKind, type ScopedProjectRef } from "@t3tools/contracts";
 import { scopedProjectKey, scopeProjectRef } from "@t3tools/client-runtime/environment";
 import { FolderPlusIcon } from "lucide-react";
 import { useCallback, useMemo } from "react";
@@ -12,9 +12,11 @@ import { selectProjectGroupingSettings } from "~/logicalProject";
 import {
   buildSidebarProjectPickerEntries,
   buildSidebarProjectSnapshots,
+  projectGroupsSpanEnvironments,
 } from "~/sidebarProjectGrouping";
 import { useProjects, useThreadShells } from "~/state/entities";
 import { useEnvironments, usePrimaryEnvironmentId } from "~/state/environments";
+import { ProjectEnvironmentLabel, resolveProjectGroupMachine } from "../ProjectEnvironmentLabel";
 import { ProjectFavicon } from "../ProjectFavicon";
 import { sortLogicalProjectsForSidebar } from "../Sidebar.logic";
 import {
@@ -83,6 +85,26 @@ export function DraftHeroHeadline({
       threads,
     ],
   );
+  // Same-named projects on two machines are only told apart by where they
+  // live, so rows carry their environment once the catalog spans more than
+  // one; a single-machine catalog stays as it was.
+  const showProjectEnvironments = useMemo(
+    () => projectGroupsSpanEnvironments(projectGroups),
+    [projectGroups],
+  );
+  const environmentMachineById = useMemo(
+    () =>
+      new Map(
+        environments.map(
+          (environment) =>
+            [
+              environment.environmentId,
+              resolveEnvironmentMachineKind(environment.serverConfig),
+            ] as const,
+        ),
+      ),
+    [environments],
+  );
   const projectPickerEntries = useMemo(
     () =>
       buildSidebarProjectPickerEntries({
@@ -167,6 +189,10 @@ export function DraftHeroHeadline({
           }}
         >
           {projectPickerEntries.map(({ group }) => {
+            const environmentLabel =
+              showProjectEnvironments && group.environmentLabels.length > 0
+                ? group.environmentLabels.join(" · ")
+                : null;
             return (
               <MenuRadioItem
                 key={group.projectKey}
@@ -180,9 +206,21 @@ export function DraftHeroHeadline({
                     {group.displayName}
                   </TooltipTrigger>
                   <TooltipPopup side="top" className="max-w-80">
-                    {group.displayName}
+                    {environmentLabel
+                      ? `${group.displayName} · ${environmentLabel}`
+                      : group.displayName}
                   </TooltipPopup>
                 </Tooltip>
+                {environmentLabel ? (
+                  <ProjectEnvironmentLabel
+                    labels={group.environmentLabels}
+                    machine={resolveProjectGroupMachine({
+                      group,
+                      primaryEnvironmentId,
+                      machineByEnvironmentId: environmentMachineById,
+                    })}
+                  />
+                ) : null}
               </MenuRadioItem>
             );
           })}
diff --git a/apps/web/src/components/settings/scopedSettings.test.ts b/apps/web/src/components/settings/scopedSettings.test.ts
index 707c82c81ec6..d49c1a8ad290 100644
--- a/apps/web/src/components/settings/scopedSettings.test.ts
+++ b/apps/web/src/components/settings/scopedSettings.test.ts
@@ -90,6 +90,7 @@ const group: SidebarProjectSnapshot = {
   allRemoteMembersAreDesktopLocal: false,
   allRemoteMembersAreWsl: false,
   remoteEnvironmentLabels: [server.label, laptop.label],
+  environmentLabels: ["Local", server.label, laptop.label],
 };
 const project = resolveSettingsScope({ project: group.projectKey }, [group], environments);
 const checkout = resolveSettingsScope(
diff --git a/apps/web/src/components/settings/settingsScope.test.ts b/apps/web/src/components/settings/settingsScope.test.ts
index 0199f6eb6cb9..25fde48fbaf2 100644
--- a/apps/web/src/components/settings/settingsScope.test.ts
+++ b/apps/web/src/components/settings/settingsScope.test.ts
@@ -54,6 +54,7 @@ function group(
     allRemoteMembersAreDesktopLocal: false,
     allRemoteMembersAreWsl: false,
     remoteEnvironmentLabels: [],
+    environmentLabels: ["Local"],
   };
 }
 
diff --git a/apps/web/src/environmentGrouping.test.ts b/apps/web/src/environmentGrouping.test.ts
index 9bd7a3e92428..0a20327a24b7 100644
--- a/apps/web/src/environmentGrouping.test.ts
+++ b/apps/web/src/environmentGrouping.test.ts
@@ -12,6 +12,7 @@ import {
   buildPhysicalToLogicalProjectKeyMap,
   buildSidebarProjectPickerEntries,
   buildSidebarProjectSnapshots,
+  projectGroupsSpanEnvironments,
 } from "./sidebarProjectGrouping";
 import { orderItemsByPreferredIds } from "./components/Sidebar.logic";
 import { legacyProjectCwdPreferenceKey } from "./uiStateStore";
@@ -81,6 +82,43 @@ describe("environment grouping", () => {
     expect(projectGroupCount).toBe(1);
   });
 
+  it("labels where each project group lives once the catalog spans environments", () => {
+    const grouped = makeProject({ repositoryIdentity });
+    const groupedRemote = makeProject({
+      id: ProjectId.make("project-remote"),
+      environmentId: remoteEnvironmentId,
+      repositoryIdentity,
+    });
+    const separateLocal = makeProject({
+      id: ProjectId.make("workbench-local"),
+      title: "workbench",
+      workspaceRoot: "/tmp/workbench",
+    });
+    const separateRemote = makeProject({
+      id: ProjectId.make("workbench-remote"),
+      environmentId: remoteEnvironmentId,
+      title: "workbench",
+      workspaceRoot: "/tmp/workbench",
+    });
+    const build = (projects: Project[]) =>
+      buildSidebarProjectSnapshots({
+        projects,
+        settings: defaultGroupingSettings,
+        primaryEnvironmentId,
+        resolveEnvironmentLabel: (environmentId) =>
+          environmentId === remoteEnvironmentId ? "Mac mini" : "Primary",
+      });
+
+    const groups = build([grouped, groupedRemote, separateLocal, separateRemote]);
+    expect(groups.map((group) => group.environmentLabels)).toEqual([
+      ["Local", "Mac mini"],
+      ["Local"],
+      ["Mac mini"],
+    ]);
+    expect(projectGroupsSpanEnvironments(groups)).toBe(true);
+    expect(projectGroupsSpanEnvironments(build([grouped, separateLocal]))).toBe(false);
+  });
+
   it("keeps projects without repository identity physically scoped", () => {
     const primary = makeProject();
     const remote = makeProject({
diff --git a/apps/web/src/sidebarProjectGrouping.ts b/apps/web/src/sidebarProjectGrouping.ts
index 3489ae57bf5d..06bb17dcab83 100644
--- a/apps/web/src/sidebarProjectGrouping.ts
+++ b/apps/web/src/sidebarProjectGrouping.ts
@@ -24,6 +24,24 @@ export interface SidebarProjectSnapshot extends Project {
   memberProjects: readonly SidebarProjectGroupMember[];
   memberProjectRefs: readonly ScopedProjectRef[];
   remoteEnvironmentLabels: readonly string[];
+  // Where the group lives, in member order: "Local" for the primary
+  // environment, the saved label for every other one. Project pickers show
+  // this when the catalog spans environments so two projects with the same
+  // name stay apart; see projectGroupsSpanEnvironments.
+  environmentLabels: readonly string[];
+}
+
+export function projectGroupsSpanEnvironments(
+  groups: ReadonlyArray<Pick<SidebarProjectSnapshot, "memberProjects">>,
+): boolean {
+  const environmentIds = new Set<EnvironmentId>();
+  for (const group of groups) {
+    for (const member of group.memberProjects) {
+      environmentIds.add(member.environmentId);
+      if (environmentIds.size > 1) return true;
+    }
+  }
+  return false;
 }
 
 export interface SidebarProjectPickerEntry {
@@ -96,6 +114,15 @@ export function buildSidebarProjectSnapshots(input: {
     const remoteEnvironmentLabels = remoteMembers
       .flatMap((member) => (member.environmentLabel ? [member.environmentLabel] : []))
       .filter((label, index, labels) => labels.indexOf(label) === index);
+    const environmentLabels = members
+      .flatMap((member) =>
+        member.environmentId === input.primaryEnvironmentId
+          ? ["Local"]
+          : member.environmentLabel
+            ? [member.environmentLabel]
+            : [],
+      )
+      .filter((label, index, labels) => labels.indexOf(label) === index);
     const isDesktopLocal = input.isDesktopLocalEnvironment ?? (() => false);
     const isWsl = input.isWslEnvironment ?? (() => false);
     const allRemoteMembersAreDesktopLocal =
@@ -116,6 +143,7 @@ export function buildSidebarProjectSnapshots(input: {
       memberProjects: members,
       memberProjectRefs: group.memberProjectRefs,
       remoteEnvironmentLabels,
+      environmentLabels,
     };
   });
 }

From fcf9f4052691f7ff08edf555f46d2427db3459a9 Mon Sep 17 00:00:00 2001
From: maria-rcks <mwria.rocks@gmail.com>
Date: Fri, 11 Sep 2026 22:37:49 +0000
Subject: [PATCH 2/4] fix(web): pin project environment label order and keep
 the popup viewport clamp
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"Local" now always leads a grouped project's labels instead of following
registration order, an unlabeled remote member reads "Remote" instead of
disappearing, the scope popup keeps its available-width clamp under the 20rem
cap, the scoped trigger lets the label yield to the project name, and search
matches the rendered "Local · <remote>" string.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/web/src/components/Sidebar.tsx      | 11 ++++++++---
 apps/web/src/environmentGrouping.test.ts | 10 +++++++++-
 apps/web/src/sidebarProjectGrouping.ts   | 17 ++++++++---------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index e84bbbdbbd61..6b02d79e19ff 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -2382,8 +2382,10 @@ export default function Sidebar() {
         matches: (item, query) =>
           projectScopeFilter.contains(item, query, (candidate) => candidate.label) ||
           (showProjectEnvironments &&
-            item.environmentLabels.some((label) =>
-              projectScopeFilter.contains(label, query, (candidate) => candidate),
+            projectScopeFilter.contains(
+              item.environmentLabels.join(" · "),
+              query,
+              (candidate) => candidate,
             )),
       }),
     [
@@ -4471,6 +4473,9 @@ export default function Sidebar() {
                     </span>
                     {scopedProjectGroup && showProjectEnvironments ? (
                       <ProjectEnvironmentLabel
+                        // The trigger has no tooltip, so at narrow sidebar
+                        // widths the label yields to the project name.
+                        className="shrink"
                         labels={scopedProjectGroup.environmentLabels}
                         machine={resolveProjectGroupMachine({
                           group: scopedProjectGroup,
@@ -4489,7 +4494,7 @@ export default function Sidebar() {
                     className={cn(
                       "min-w-0 overflow-hidden",
                       showProjectEnvironments
-                        ? "w-max min-w-(--anchor-width) max-w-80"
+                        ? "w-max min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]"
                         : "w-(--anchor-width)",
                     )}
                   >
diff --git a/apps/web/src/environmentGrouping.test.ts b/apps/web/src/environmentGrouping.test.ts
index 0a20327a24b7..292727a5657d 100644
--- a/apps/web/src/environmentGrouping.test.ts
+++ b/apps/web/src/environmentGrouping.test.ts
@@ -109,7 +109,7 @@ describe("environment grouping", () => {
           environmentId === remoteEnvironmentId ? "Mac mini" : "Primary",
       });
 
-    const groups = build([grouped, groupedRemote, separateLocal, separateRemote]);
+    const groups = build([groupedRemote, grouped, separateLocal, separateRemote]);
     expect(groups.map((group) => group.environmentLabels)).toEqual([
       ["Local", "Mac mini"],
       ["Local"],
@@ -117,6 +117,14 @@ describe("environment grouping", () => {
     ]);
     expect(projectGroupsSpanEnvironments(groups)).toBe(true);
     expect(projectGroupsSpanEnvironments(build([grouped, separateLocal]))).toBe(false);
+
+    const unlabeled = buildSidebarProjectSnapshots({
+      projects: [grouped, groupedRemote],
+      settings: defaultGroupingSettings,
+      primaryEnvironmentId,
+      resolveEnvironmentLabel: () => null,
+    });
+    expect(unlabeled[0]?.environmentLabels).toEqual(["Local", "Remote"]);
   });
 
   it("keeps projects without repository identity physically scoped", () => {
diff --git a/apps/web/src/sidebarProjectGrouping.ts b/apps/web/src/sidebarProjectGrouping.ts
index 06bb17dcab83..027db3bdd3e6 100644
--- a/apps/web/src/sidebarProjectGrouping.ts
+++ b/apps/web/src/sidebarProjectGrouping.ts
@@ -114,15 +114,14 @@ export function buildSidebarProjectSnapshots(input: {
     const remoteEnvironmentLabels = remoteMembers
       .flatMap((member) => (member.environmentLabel ? [member.environmentLabel] : []))
       .filter((label, index, labels) => labels.indexOf(label) === index);
-    const environmentLabels = members
-      .flatMap((member) =>
-        member.environmentId === input.primaryEnvironmentId
-          ? ["Local"]
-          : member.environmentLabel
-            ? [member.environmentLabel]
-            : [],
-      )
-      .filter((label, index, labels) => labels.indexOf(label) === index);
+    // "Local" leads regardless of member order, which follows registration
+    // order and so can differ between sessions.
+    const environmentLabels = [
+      ...(hasLocal ? ["Local"] : []),
+      ...members
+        .filter((member) => member.environmentId !== input.primaryEnvironmentId)
+        .map((member) => member.environmentLabel ?? "Remote"),
+    ].filter((label, index, labels) => labels.indexOf(label) === index);
     const isDesktopLocal = input.isDesktopLocalEnvironment ?? (() => false);
     const isWsl = input.isWslEnvironment ?? (() => false);
     const allRemoteMembersAreDesktopLocal =

From 1147bdfb52e0f69e22d093a567111e70e326ba67 Mon Sep 17 00:00:00 2001
From: maria-rcks <mwria.rocks@gmail.com>
Date: Fri, 11 Sep 2026 22:47:24 +0000
Subject: [PATCH 3/4] refactor(web): mark remote projects with a machine icon
 instead of environment names

Local projects show nothing and no row spells out an environment name. A
project with a member on another machine gets the machine icon used by thread
rows, with the environment names in its tooltip. This drops the label field,
the label search matching, and the wider popup from the first pass.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../components/ProjectEnvironmentBadge.tsx    | 52 ++++++++++++++++
 .../components/ProjectEnvironmentLabel.tsx    | 49 ---------------
 apps/web/src/components/Sidebar.tsx           | 60 +++++--------------
 .../src/components/chat/DraftHeroHeadline.tsx | 27 +++------
 .../settings/scopedSettings.test.ts           |  1 -
 .../components/settings/settingsScope.test.ts |  1 -
 apps/web/src/environmentGrouping.test.ts      | 17 +-----
 apps/web/src/sidebarProjectGrouping.ts        | 14 -----
 8 files changed, 79 insertions(+), 142 deletions(-)
 create mode 100644 apps/web/src/components/ProjectEnvironmentBadge.tsx
 delete mode 100644 apps/web/src/components/ProjectEnvironmentLabel.tsx

diff --git a/apps/web/src/components/ProjectEnvironmentBadge.tsx b/apps/web/src/components/ProjectEnvironmentBadge.tsx
new file mode 100644
index 000000000000..c35998bd9315
--- /dev/null
+++ b/apps/web/src/components/ProjectEnvironmentBadge.tsx
@@ -0,0 +1,52 @@
+import type { EnvironmentId, EnvironmentMachineKind } from "@t3tools/contracts";
+
+import { cn } from "~/lib/utils";
+import type { SidebarProjectSnapshot } from "~/sidebarProjectGrouping";
+import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
+
+/**
+ * Machine icon for a project picker row whose group has a member on another
+ * environment, with the environment names in a tooltip. Projects that only
+ * live on this device render nothing, the same rule thread rows use. Callers
+ * render it only while the catalog spans environments (see
+ * projectGroupsSpanEnvironments), so single-machine users see no change.
+ */
+export function ProjectEnvironmentBadge(props: {
+  readonly group: Pick<SidebarProjectSnapshot, "memberProjects">;
+  readonly primaryEnvironmentId: EnvironmentId | null;
+  readonly machineByEnvironmentId: ReadonlyMap<EnvironmentId, EnvironmentMachineKind>;
+  readonly className?: string;
+}) {
+  const remoteMembers = props.group.memberProjects.filter(
+    (member) => member.environmentId !== props.primaryEnvironmentId,
+  );
+  const first = remoteMembers[0];
+  if (!first) return null;
+  const labels = remoteMembers
+    .map((member) => member.environmentLabel ?? "Remote")
+    .filter((label, index, all) => all.indexOf(label) === index)
+    .join(", ");
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            aria-label={`Remote environment: ${labels}`}
+            className={cn(
+              "ml-auto inline-flex shrink-0 items-center text-muted-foreground",
+              props.className,
+            )}
+          />
+        }
+      >
+        <EnvironmentMachineIcon
+          aria-hidden
+          kind={props.machineByEnvironmentId.get(first.environmentId) ?? "server"}
+          className="size-3.5"
+        />
+      </TooltipTrigger>
+      <TooltipPopup side="top">{labels}</TooltipPopup>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/src/components/ProjectEnvironmentLabel.tsx b/apps/web/src/components/ProjectEnvironmentLabel.tsx
deleted file mode 100644
index b7d6e55529af..000000000000
--- a/apps/web/src/components/ProjectEnvironmentLabel.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { EnvironmentId, EnvironmentMachineKind } from "@t3tools/contracts";
-
-import { cn } from "~/lib/utils";
-import type { SidebarProjectSnapshot } from "~/sidebarProjectGrouping";
-import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
-
-/**
- * Machine icon for a project group's row: the first non-primary member's
- * machine, or none when the group only lives on this device. Matches the
- * thread rows and command palette, which draw an icon for remote work only.
- */
-export function resolveProjectGroupMachine(input: {
-  readonly group: Pick<SidebarProjectSnapshot, "memberProjects">;
-  readonly primaryEnvironmentId: EnvironmentId | null;
-  readonly machineByEnvironmentId: ReadonlyMap<EnvironmentId, EnvironmentMachineKind>;
-}): EnvironmentMachineKind | null {
-  const remoteMember = input.group.memberProjects.find(
-    (member) => member.environmentId !== input.primaryEnvironmentId,
-  );
-  return remoteMember
-    ? (input.machineByEnvironmentId.get(remoteMember.environmentId) ?? null)
-    : null;
-}
-
-/**
- * Muted "where this project lives" suffix for a project picker row. Callers
- * render it only while the catalog spans environments (see
- * projectGroupsSpanEnvironments), so single-machine users see no change.
- */
-export function ProjectEnvironmentLabel(props: {
-  readonly labels: readonly string[];
-  readonly machine: EnvironmentMachineKind | null;
-  readonly className?: string;
-}) {
-  if (props.labels.length === 0) return null;
-  return (
-    <span
-      className={cn(
-        "ml-auto flex min-w-0 max-w-[40%] shrink-0 items-center gap-1 font-normal text-muted-foreground text-xs",
-        props.className,
-      )}
-    >
-      {props.machine ? (
-        <EnvironmentMachineIcon aria-hidden kind={props.machine} className="size-3 shrink-0" />
-      ) : null}
-      <span className="truncate">{props.labels.join(" · ")}</span>
-    </span>
-  );
-}
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 6b02d79e19ff..2bc0c6bab019 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -142,7 +142,7 @@ import type { SidebarThreadSummary } from "../types";
 import type { EnvironmentProject } from "@t3tools/client-runtime/state/shell";
 import { cn } from "~/lib/utils";
 import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
-import { ProjectEnvironmentLabel, resolveProjectGroupMachine } from "./ProjectEnvironmentLabel";
+import { ProjectEnvironmentBadge } from "./ProjectEnvironmentBadge";
 import { buildThreadActionMenuItems } from "./threadActionMenu.logic";
 import {
   animateSidebarLayoutChanges,
@@ -2335,18 +2335,17 @@ export default function Sidebar() {
   // while the popup search filters the same collection.
   const projectScopeItems = useMemo(
     () => [
-      { value: "all", label: "All projects", environmentLabels: [] as readonly string[] },
+      { value: "all", label: "All projects" },
       ...projectGroups.map((project) => ({
         value: project.projectKey,
         label: project.displayName,
-        environmentLabels: project.environmentLabels,
       })),
     ],
     [projectGroups],
   );
   // Same-named projects on two machines are only told apart by where they
-  // live, so rows carry their environment once the catalog spans more than
-  // one; a single-machine catalog stays as it was.
+  // live, so rows on another machine carry its icon once the catalog spans
+  // more than one environment; a single-machine catalog stays as it was.
   const showProjectEnvironments = useMemo(
     () => projectGroupsSpanEnvironments(projectGroups),
     [projectGroups],
@@ -2380,21 +2379,9 @@ export default function Sidebar() {
         activeScopeKey: projectScopeKey,
         query: projectScopeMenuState.query,
         matches: (item, query) =>
-          projectScopeFilter.contains(item, query, (candidate) => candidate.label) ||
-          (showProjectEnvironments &&
-            projectScopeFilter.contains(
-              item.environmentLabels.join(" · "),
-              query,
-              (candidate) => candidate,
-            )),
+          projectScopeFilter.contains(item, query, (candidate) => candidate.label),
       }),
-    [
-      projectScopeFilter,
-      projectScopeItems,
-      projectScopeKey,
-      projectScopeMenuState.query,
-      showProjectEnvironments,
-    ],
+    [projectScopeFilter, projectScopeItems, projectScopeKey, projectScopeMenuState.query],
   );
   const scopedProjectGroup = useMemo(
     () =>
@@ -4472,31 +4459,17 @@ export default function Sidebar() {
                       {scopedProjectGroup?.displayName ?? "All projects"}
                     </span>
                     {scopedProjectGroup && showProjectEnvironments ? (
-                      <ProjectEnvironmentLabel
-                        // The trigger has no tooltip, so at narrow sidebar
-                        // widths the label yields to the project name.
-                        className="shrink"
-                        labels={scopedProjectGroup.environmentLabels}
-                        machine={resolveProjectGroupMachine({
-                          group: scopedProjectGroup,
-                          primaryEnvironmentId,
-                          machineByEnvironmentId: environmentMachineById,
-                        })}
+                      <ProjectEnvironmentBadge
+                        group={scopedProjectGroup}
+                        primaryEnvironmentId={primaryEnvironmentId}
+                        machineByEnvironmentId={environmentMachineById}
                       />
                     ) : null}
                     <ChevronDownIcon className="-mr-px size-4 shrink-0" />
                   </ComboboxTrigger>
                   <ComboboxPopup
                     align="start"
-                    // Anchor-wide by default; grows past the trigger only when
-                    // rows carry environment labels, up to 20rem, so a project
-                    // name and where it lives both stay readable.
-                    className={cn(
-                      "min-w-0 overflow-hidden",
-                      showProjectEnvironments
-                        ? "w-max min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]"
-                        : "w-(--anchor-width)",
-                    )}
+                    className="w-(--anchor-width) min-w-0 overflow-hidden"
                   >
                     <ComboboxSearchInput
                       aria-label="Search projects"
@@ -4548,13 +4521,10 @@ export default function Sidebar() {
                             )}
                             <span className="min-w-0 flex-1 truncate text-sm">{item.label}</span>
                             {project && showProjectEnvironments ? (
-                              <ProjectEnvironmentLabel
-                                labels={project.environmentLabels}
-                                machine={resolveProjectGroupMachine({
-                                  group: project,
-                                  primaryEnvironmentId,
-                                  machineByEnvironmentId: environmentMachineById,
-                                })}
+                              <ProjectEnvironmentBadge
+                                group={project}
+                                primaryEnvironmentId={primaryEnvironmentId}
+                                machineByEnvironmentId={environmentMachineById}
                               />
                             ) : null}
                             {project ? (
diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx
index 927c5953d332..07956c2b299e 100644
--- a/apps/web/src/components/chat/DraftHeroHeadline.tsx
+++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx
@@ -16,7 +16,7 @@ import {
 } from "~/sidebarProjectGrouping";
 import { useProjects, useThreadShells } from "~/state/entities";
 import { useEnvironments, usePrimaryEnvironmentId } from "~/state/environments";
-import { ProjectEnvironmentLabel, resolveProjectGroupMachine } from "../ProjectEnvironmentLabel";
+import { ProjectEnvironmentBadge } from "../ProjectEnvironmentBadge";
 import { ProjectFavicon } from "../ProjectFavicon";
 import { sortLogicalProjectsForSidebar } from "../Sidebar.logic";
 import {
@@ -86,8 +86,8 @@ export function DraftHeroHeadline({
     ],
   );
   // Same-named projects on two machines are only told apart by where they
-  // live, so rows carry their environment once the catalog spans more than
-  // one; a single-machine catalog stays as it was.
+  // live, so rows on another machine carry its icon once the catalog spans
+  // more than one environment; a single-machine catalog stays as it was.
   const showProjectEnvironments = useMemo(
     () => projectGroupsSpanEnvironments(projectGroups),
     [projectGroups],
@@ -189,10 +189,6 @@ export function DraftHeroHeadline({
           }}
         >
           {projectPickerEntries.map(({ group }) => {
-            const environmentLabel =
-              showProjectEnvironments && group.environmentLabels.length > 0
-                ? group.environmentLabels.join(" · ")
-                : null;
             return (
               <MenuRadioItem
                 key={group.projectKey}
@@ -206,19 +202,14 @@ export function DraftHeroHeadline({
                     {group.displayName}
                   </TooltipTrigger>
                   <TooltipPopup side="top" className="max-w-80">
-                    {environmentLabel
-                      ? `${group.displayName} · ${environmentLabel}`
-                      : group.displayName}
+                    {group.displayName}
                   </TooltipPopup>
                 </Tooltip>
-                {environmentLabel ? (
-                  <ProjectEnvironmentLabel
-                    labels={group.environmentLabels}
-                    machine={resolveProjectGroupMachine({
-                      group,
-                      primaryEnvironmentId,
-                      machineByEnvironmentId: environmentMachineById,
-                    })}
+                {showProjectEnvironments ? (
+                  <ProjectEnvironmentBadge
+                    group={group}
+                    primaryEnvironmentId={primaryEnvironmentId}
+                    machineByEnvironmentId={environmentMachineById}
                   />
                 ) : null}
               </MenuRadioItem>
diff --git a/apps/web/src/components/settings/scopedSettings.test.ts b/apps/web/src/components/settings/scopedSettings.test.ts
index d49c1a8ad290..707c82c81ec6 100644
--- a/apps/web/src/components/settings/scopedSettings.test.ts
+++ b/apps/web/src/components/settings/scopedSettings.test.ts
@@ -90,7 +90,6 @@ const group: SidebarProjectSnapshot = {
   allRemoteMembersAreDesktopLocal: false,
   allRemoteMembersAreWsl: false,
   remoteEnvironmentLabels: [server.label, laptop.label],
-  environmentLabels: ["Local", server.label, laptop.label],
 };
 const project = resolveSettingsScope({ project: group.projectKey }, [group], environments);
 const checkout = resolveSettingsScope(
diff --git a/apps/web/src/components/settings/settingsScope.test.ts b/apps/web/src/components/settings/settingsScope.test.ts
index 25fde48fbaf2..0199f6eb6cb9 100644
--- a/apps/web/src/components/settings/settingsScope.test.ts
+++ b/apps/web/src/components/settings/settingsScope.test.ts
@@ -54,7 +54,6 @@ function group(
     allRemoteMembersAreDesktopLocal: false,
     allRemoteMembersAreWsl: false,
     remoteEnvironmentLabels: [],
-    environmentLabels: ["Local"],
   };
 }
 
diff --git a/apps/web/src/environmentGrouping.test.ts b/apps/web/src/environmentGrouping.test.ts
index 292727a5657d..efb6d8412ce0 100644
--- a/apps/web/src/environmentGrouping.test.ts
+++ b/apps/web/src/environmentGrouping.test.ts
@@ -82,7 +82,7 @@ describe("environment grouping", () => {
     expect(projectGroupCount).toBe(1);
   });
 
-  it("labels where each project group lives once the catalog spans environments", () => {
+  it("reports whether the project groups span more than one environment", () => {
     const grouped = makeProject({ repositoryIdentity });
     const groupedRemote = makeProject({
       id: ProjectId.make("project-remote"),
@@ -110,21 +110,10 @@ describe("environment grouping", () => {
       });
 
     const groups = build([groupedRemote, grouped, separateLocal, separateRemote]);
-    expect(groups.map((group) => group.environmentLabels)).toEqual([
-      ["Local", "Mac mini"],
-      ["Local"],
-      ["Mac mini"],
-    ]);
+    expect(groups).toHaveLength(3);
     expect(projectGroupsSpanEnvironments(groups)).toBe(true);
     expect(projectGroupsSpanEnvironments(build([grouped, separateLocal]))).toBe(false);
-
-    const unlabeled = buildSidebarProjectSnapshots({
-      projects: [grouped, groupedRemote],
-      settings: defaultGroupingSettings,
-      primaryEnvironmentId,
-      resolveEnvironmentLabel: () => null,
-    });
-    expect(unlabeled[0]?.environmentLabels).toEqual(["Local", "Remote"]);
+    expect(projectGroupsSpanEnvironments(build([separateRemote]))).toBe(false);
   });
 
   it("keeps projects without repository identity physically scoped", () => {
diff --git a/apps/web/src/sidebarProjectGrouping.ts b/apps/web/src/sidebarProjectGrouping.ts
index 027db3bdd3e6..914b0cac844d 100644
--- a/apps/web/src/sidebarProjectGrouping.ts
+++ b/apps/web/src/sidebarProjectGrouping.ts
@@ -24,11 +24,6 @@ export interface SidebarProjectSnapshot extends Project {
   memberProjects: readonly SidebarProjectGroupMember[];
   memberProjectRefs: readonly ScopedProjectRef[];
   remoteEnvironmentLabels: readonly string[];
-  // Where the group lives, in member order: "Local" for the primary
-  // environment, the saved label for every other one. Project pickers show
-  // this when the catalog spans environments so two projects with the same
-  // name stay apart; see projectGroupsSpanEnvironments.
-  environmentLabels: readonly string[];
 }
 
 export function projectGroupsSpanEnvironments(
@@ -114,14 +109,6 @@ export function buildSidebarProjectSnapshots(input: {
     const remoteEnvironmentLabels = remoteMembers
       .flatMap((member) => (member.environmentLabel ? [member.environmentLabel] : []))
       .filter((label, index, labels) => labels.indexOf(label) === index);
-    // "Local" leads regardless of member order, which follows registration
-    // order and so can differ between sessions.
-    const environmentLabels = [
-      ...(hasLocal ? ["Local"] : []),
-      ...members
-        .filter((member) => member.environmentId !== input.primaryEnvironmentId)
-        .map((member) => member.environmentLabel ?? "Remote"),
-    ].filter((label, index, labels) => labels.indexOf(label) === index);
     const isDesktopLocal = input.isDesktopLocalEnvironment ?? (() => false);
     const isWsl = input.isWslEnvironment ?? (() => false);
     const allRemoteMembersAreDesktopLocal =
@@ -142,7 +129,6 @@ export function buildSidebarProjectSnapshots(input: {
       memberProjects: members,
       memberProjectRefs: group.memberProjectRefs,
       remoteEnvironmentLabels,
-      environmentLabels,
     };
   });
 }

From d6a5a2f4201f8a02be33d69ceaffe54550e15af6 Mon Sep 17 00:00:00 2001
From: maria-rcks <mwria.rocks@gmail.com>
Date: Fri, 11 Sep 2026 22:55:11 +0000
Subject: [PATCH 4/4] fix(web): keep the project machine badge stable and
 describe it accurately

Sort remote members by label so the icon and tooltip do not follow
registration order, give the badge span an img role, say "Also on" when the
project lives here too, and drop the unused className prop.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../components/ProjectEnvironmentBadge.tsx    | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/ProjectEnvironmentBadge.tsx b/apps/web/src/components/ProjectEnvironmentBadge.tsx
index c35998bd9315..22be8298a4f8 100644
--- a/apps/web/src/components/ProjectEnvironmentBadge.tsx
+++ b/apps/web/src/components/ProjectEnvironmentBadge.tsx
@@ -1,6 +1,5 @@
 import type { EnvironmentId, EnvironmentMachineKind } from "@t3tools/contracts";
 
-import { cn } from "~/lib/utils";
 import type { SidebarProjectSnapshot } from "~/sidebarProjectGrouping";
 import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
@@ -8,7 +7,8 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 /**
  * Machine icon for a project picker row whose group has a member on another
  * environment, with the environment names in a tooltip. Projects that only
- * live on this device render nothing, the same rule thread rows use. Callers
+ * live on this device render nothing, the rule thread rows use for their
+ * machine icon. Callers
  * render it only while the catalog spans environments (see
  * projectGroupsSpanEnvironments), so single-machine users see no change.
  */
@@ -16,27 +16,29 @@ export function ProjectEnvironmentBadge(props: {
   readonly group: Pick<SidebarProjectSnapshot, "memberProjects">;
   readonly primaryEnvironmentId: EnvironmentId | null;
   readonly machineByEnvironmentId: ReadonlyMap<EnvironmentId, EnvironmentMachineKind>;
-  readonly className?: string;
 }) {
-  const remoteMembers = props.group.memberProjects.filter(
-    (member) => member.environmentId !== props.primaryEnvironmentId,
-  );
+  // Member order follows registration order and can differ between sessions,
+  // so sort by label to keep the icon and tooltip stable.
+  const remoteMembers = props.group.memberProjects
+    .filter((member) => member.environmentId !== props.primaryEnvironmentId)
+    .map((member) => ({ ...member, environmentLabel: member.environmentLabel ?? "Remote" }))
+    .sort((a, b) => a.environmentLabel.localeCompare(b.environmentLabel));
   const first = remoteMembers[0];
   if (!first) return null;
   const labels = remoteMembers
-    .map((member) => member.environmentLabel ?? "Remote")
+    .map((member) => member.environmentLabel)
     .filter((label, index, all) => all.indexOf(label) === index)
     .join(", ");
+  const alsoHere = remoteMembers.length < props.group.memberProjects.length;
+  const description = `${alsoHere ? "Also on" : "On"} ${labels}`;
   return (
     <Tooltip>
       <TooltipTrigger
         render={
           <span
-            aria-label={`Remote environment: ${labels}`}
-            className={cn(
-              "ml-auto inline-flex shrink-0 items-center text-muted-foreground",
-              props.className,
-            )}
+            role="img"
+            aria-label={description}
+            className="ml-auto inline-flex shrink-0 items-center text-muted-foreground"
           />
         }
       >
@@ -46,7 +48,7 @@ export function ProjectEnvironmentBadge(props: {
           className="size-3.5"
         />
       </TooltipTrigger>
-      <TooltipPopup side="top">{labels}</TooltipPopup>
+      <TooltipPopup side="top">{description}</TooltipPopup>
     </Tooltip>
   );
 }