From 4a8ab1b720c41b035dc4b7c58030ed62fbe6bd7f Mon Sep 17 00:00:00 2001
From: maria <maria@kuuro.net>
Date: Fri, 11 Sep 2026 20:19:39 -0300
Subject: [PATCH] feat(web): mark projects on another machine in project
 pickers (#11323)

Co-authored-by: maria-rcks <mwria.rocks@gmail.com>
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../components/ProjectEnvironmentBadge.tsx    | 54 +++++++++++++++++++
 apps/web/src/components/Sidebar.tsx           | 23 ++++++++
 .../src/components/chat/DraftHeroHeadline.tsx | 31 ++++++++++-
 apps/web/src/environmentGrouping.test.ts      | 35 ++++++++++++
 apps/web/src/sidebarProjectGrouping.ts        | 13 +++++
 5 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/components/ProjectEnvironmentBadge.tsx

diff --git a/apps/web/src/components/ProjectEnvironmentBadge.tsx b/apps/web/src/components/ProjectEnvironmentBadge.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..22be8298a4f8baa1ea815588cc529c08c5bb879c
--- /dev/null
+++ b/apps/web/src/components/ProjectEnvironmentBadge.tsx
@@ -0,0 +1,54 @@
+import type { EnvironmentId, EnvironmentMachineKind } from "@t3tools/contracts";
+
+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 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.
+ */
+export function ProjectEnvironmentBadge(props: {
+  readonly group: Pick<SidebarProjectSnapshot, "memberProjects">;
+  readonly primaryEnvironmentId: EnvironmentId | null;
+  readonly machineByEnvironmentId: ReadonlyMap<EnvironmentId, EnvironmentMachineKind>;
+}) {
+  // 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)
+    .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
+            role="img"
+            aria-label={description}
+            className="ml-auto inline-flex shrink-0 items-center text-muted-foreground"
+          />
+        }
+      >
+        <EnvironmentMachineIcon
+          aria-hidden
+          kind={props.machineByEnvironmentId.get(first.environmentId) ?? "server"}
+          className="size-3.5"
+        />
+      </TooltipTrigger>
+      <TooltipPopup side="top">{description}</TooltipPopup>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index c269b73ee76150bad8ca1add34de65837d92e06d..2bc0c6bab019c4ab9da898a12c48a1aa1c809ae8 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 { ProjectEnvironmentBadge } from "./ProjectEnvironmentBadge";
 import { buildThreadActionMenuItems } from "./threadActionMenu.logic";
 import {
   animateSidebarLayoutChanges,
@@ -2341,6 +2343,13 @@ export default function Sidebar() {
     ],
     [projectGroups],
   );
+  // Same-named projects on two machines are only told apart by where they
+  // 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],
+  );
   const projectGroupByScopeKey = useMemo(
     () => new Map(projectGroups.map((project) => [project.projectKey, project] as const)),
     [projectGroups],
@@ -4449,6 +4458,13 @@ export default function Sidebar() {
                     <span className="min-w-0 flex-1 truncate">
                       {scopedProjectGroup?.displayName ?? "All projects"}
                     </span>
+                    {scopedProjectGroup && showProjectEnvironments ? (
+                      <ProjectEnvironmentBadge
+                        group={scopedProjectGroup}
+                        primaryEnvironmentId={primaryEnvironmentId}
+                        machineByEnvironmentId={environmentMachineById}
+                      />
+                    ) : null}
                     <ChevronDownIcon className="-mr-px size-4 shrink-0" />
                   </ComboboxTrigger>
                   <ComboboxPopup
@@ -4504,6 +4520,13 @@ 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 ? (
+                              <ProjectEnvironmentBadge
+                                group={project}
+                                primaryEnvironmentId={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 1e0d295c098fcf28560e2f423f5a43399f797071..07956c2b299e6fa3f18c4cc8e24c79b41e4fbfb8 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 { ProjectEnvironmentBadge } from "../ProjectEnvironmentBadge";
 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 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],
+  );
+  const environmentMachineById = useMemo(
+    () =>
+      new Map(
+        environments.map(
+          (environment) =>
+            [
+              environment.environmentId,
+              resolveEnvironmentMachineKind(environment.serverConfig),
+            ] as const,
+        ),
+      ),
+    [environments],
+  );
   const projectPickerEntries = useMemo(
     () =>
       buildSidebarProjectPickerEntries({
@@ -183,6 +205,13 @@ export function DraftHeroHeadline({
                     {group.displayName}
                   </TooltipPopup>
                 </Tooltip>
+                {showProjectEnvironments ? (
+                  <ProjectEnvironmentBadge
+                    group={group}
+                    primaryEnvironmentId={primaryEnvironmentId}
+                    machineByEnvironmentId={environmentMachineById}
+                  />
+                ) : null}
               </MenuRadioItem>
             );
           })}
diff --git a/apps/web/src/environmentGrouping.test.ts b/apps/web/src/environmentGrouping.test.ts
index 9bd7a3e924283e958161bcde9480a5b216ac182d..efb6d8412ce059941a3d2d51fbe257c78787ea88 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,40 @@ describe("environment grouping", () => {
     expect(projectGroupCount).toBe(1);
   });
 
+  it("reports whether the project groups span more than one environment", () => {
+    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([groupedRemote, grouped, separateLocal, separateRemote]);
+    expect(groups).toHaveLength(3);
+    expect(projectGroupsSpanEnvironments(groups)).toBe(true);
+    expect(projectGroupsSpanEnvironments(build([grouped, separateLocal]))).toBe(false);
+    expect(projectGroupsSpanEnvironments(build([separateRemote]))).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 3489ae57bf5de6080c4c890c102745c78eda516b..914b0cac844dfcbba025cf2b71e38c4c54b4a6a5 100644
--- a/apps/web/src/sidebarProjectGrouping.ts
+++ b/apps/web/src/sidebarProjectGrouping.ts
@@ -26,6 +26,19 @@ export interface SidebarProjectSnapshot extends Project {
   remoteEnvironmentLabels: 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 {
   group: SidebarProjectSnapshot;
   targetProject: SidebarProjectGroupMember;
-- 
2.54.0