Commit 829c3db94830fc70b5754513b8a370f7301ca213 | the-knife

apps/mobile/src/features/archive/ArchivedThreadsScreen.tsx+29-6

 @@ -3,7 +3,11 @@ import type {
   EnvironmentThreadShell,
 } from "@t3tools/client-runtime/state/shell";
 import { LegendList } from "@legendapp/list/react-native";
-import type { EnvironmentId } from "@t3tools/contracts";
+import {
+  type EnvironmentId,
+  type EnvironmentMachineKind,
+  resolveEnvironmentMachineKind,
+} from "@t3tools/contracts";
 import type { MenuAction } from "@react-native-menu/menu";
 import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
 import { SymbolView } from "../../components/AppSymbol";
 @@ -24,10 +28,12 @@ import type { SwipeableMethods } from "react-native-gesture-handler/ReanimatedSw
 import { AppText as Text } from "../../components/AppText";
 import { ControlPillMenu } from "../../components/ControlPill";
 import { EmptyState } from "../../components/EmptyState";
+import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol";
 import { ProjectFavicon } from "../../components/ProjectFavicon";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { relativeTime } from "../../lib/time";
 import { useUniwindTheme } from "../../lib/useUniwindTheme";
+import { useServerConfigs } from "../../state/entities";
 import { ThreadSwipeable } from "../home/thread-swipe-actions";
 import {
   createNativeMailSearchToolbarItem,
 @@ -45,6 +51,7 @@ type ArchivedThreadListItem =
       readonly kind: "project";
       readonly key: string;
       readonly environmentLabel: string | null;
+      readonly environmentMachine: EnvironmentMachineKind;
       readonly project: EnvironmentProject;
     }
   | {
 @@ -360,6 +367,7 @@ function ArchivedThreadsHeader(props: {
 function ProjectGroupLabel(props: {
   readonly environmentLabel: string | null;
+  readonly environmentMachine: EnvironmentMachineKind;
   readonly project: EnvironmentProject;
 }) {
   return (
 @@ -378,9 +386,16 @@ function ProjectGroupLabel(props: {
         {props.project.title}
       </Text>
       {props.environmentLabel ? (
-        <Text className="max-w-[42%] text-2xs text-foreground-tertiary" numberOfLines={1}>
+        <View className="max-w-[42%] flex-row items-center gap-1">
-          {props.environmentLabel}
+          <EnvironmentMachineSymbol
-        </Text>
+            kind={props.environmentMachine}
+            size={10}
+            tintColorClassName="accent-foreground-tertiary"
+          />
+          <Text className="shrink text-2xs text-foreground-tertiary" numberOfLines={1}>
+            {props.environmentLabel}
+          </Text>
+        </View>
       ) : null}
     </View>
   );
 @@ -517,6 +532,7 @@ export function ArchivedThreadsScreen(props: {
       ),
     [props.environments],
   );
+  const serverConfigs = useServerConfigs();
   const listItems = useMemo<ReadonlyArray<ArchivedThreadListItem>>(() => {
     const items: ArchivedThreadListItem[] = [];
     for (const group of props.groups) {
 @@ -525,6 +541,9 @@ export function ArchivedThreadsScreen(props: {
         kind: "project",
         key: `${group.key}:project`,
         environmentLabel,
+        environmentMachine: resolveEnvironmentMachineKind(
+          serverConfigs.get(group.project.environmentId) ?? null,
+        ),
         project: group.project,
       });
 @@ -540,7 +559,7 @@ export function ArchivedThreadsScreen(props: {
       });
     }
     return items;
-  }, [environmentLabelsById, props.groups]);
+  }, [environmentLabelsById, props.groups, serverConfigs]);
   const handleSwipeableWillOpen = useCallback((methods: SwipeableMethods) => {
     if (openSwipeableRef.current && openSwipeableRef.current !== methods) {
       openSwipeableRef.current.close();
 @@ -559,7 +578,11 @@ export function ArchivedThreadsScreen(props: {
       if (item.kind === "project") {
         return (
           <View className="pt-4">
-            <ProjectGroupLabel environmentLabel={item.environmentLabel} project={item.project} />
+            <ProjectGroupLabel
+              environmentLabel={item.environmentLabel}
+              environmentMachine={item.environmentMachine}
+              project={item.project}
+            />
           </View>
         );
       }

apps/mobile/src/features/projects/AddProjectScreen.tsx+13-5

 @@ -31,7 +31,13 @@ import {
   inferProjectTitleFromPath,
   isWindowsPlatform,
 } from "@t3tools/client-runtime/state/projects";
-import { CommandId, type EnvironmentId, ProjectId } from "@t3tools/contracts";
+import {
+  CommandId,
+  type EnvironmentId,
+  type EnvironmentMachineKind,
+  ProjectId,
+  resolveEnvironmentMachineKind,
+} from "@t3tools/contracts";
 import { CommonActions, StackActions, useNavigation } from "@react-navigation/native";
 import { SymbolView } from "../../components/AppSymbol";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 @@ -49,6 +55,7 @@ import { projectEnvironment } from "../../state/projects";
 import { useEnvironmentQuery } from "../../state/query";
 import { sourceControlEnvironment } from "../../state/sourceControl";
 import { AppText as Text, AppTextInput as TextInput } from "../../components/AppText";
+import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol";
 import { ErrorBanner } from "../../components/ErrorBanner";
 import { SourceControlIcon } from "../../components/SourceControlIcon";
 import { uuidv4 } from "../../lib/uuid";
 @@ -65,6 +72,7 @@ interface EnvironmentOption {
   readonly environmentId: EnvironmentId;
   readonly label: string;
   readonly platform: string;
+  readonly machine: EnvironmentMachineKind;
   readonly baseDirectory: string | null;
   readonly connectionState: EnvironmentConnectionPhase;
   readonly connectionError: string | null;
 @@ -352,6 +360,7 @@ function useEnvironmentOptions(): ReadonlyArray<EnvironmentOption> {
         environmentId: connection.environmentId,
         label: connection.environmentLabel,
         platform: platformFromOs(config?.environment.platform.os ?? null),
+        machine: resolveEnvironmentMachineKind(config ?? null),
         baseDirectory: config?.settings.addProjectBaseDirectory ?? null,
         connectionState: runtime?.connectionState ?? "available",
         connectionError: runtime?.connectionError ?? null,
 @@ -490,11 +499,10 @@ export function AddProjectSourceScreen() {
                       })
                 }
                 icon={
-                  <SymbolView
+                  <EnvironmentMachineSymbol
-                    name="server.rack"
+                    kind={environment.machine}
                     size={17}
-                    tintColorClassName={"accent-icon"}
+                    tintColorClassName="accent-icon"
-                    type="monochrome"
                   />
                 }
                 selected={environment.environmentId === selectedEnvironment?.environmentId}

apps/mobile/src/features/settings/SettingsClientStorageRouteScreen.tsx+9-7

 @@ -1,4 +1,5 @@
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import { type EnvironmentMachineKind, resolveEnvironmentMachineKind } from "@t3tools/contracts";
 import { AsyncResult } from "effect/unstable/reactivity";
 import { useMemo } from "react";
 import { ActivityIndicator, Alert, Pressable, ScrollView, View } from "react-native";
 @@ -6,11 +7,13 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AppText as Text } from "../../components/AppText";
 import { SymbolView } from "../../components/AppSymbol";
+import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol";
 import {
   clearClientCacheAtom,
   clientCacheSummaryAtom,
   type EnvironmentClientCacheSummary,
 } from "../../state/client-cache-state";
+import { useServerConfigs } from "../../state/entities";
 import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";
 import { SettingsSection } from "./components/SettingsSection";
 @@ -20,6 +23,7 @@ export function SettingsClientStorageRouteScreen() {
   const clearResult = useAtomValue(clearClientCacheAtom);
   const clearCache = useAtomSet(clearClientCacheAtom);
   const { savedConnectionsById } = useSavedRemoteConnections();
+  const serverConfigs = useServerConfigs();
   const isClearing = clearResult.waiting;
   const summary = AsyncResult.isSuccess(summaryResult) ? summaryResult.value : null;
   const environmentSummaries = useMemo(
 @@ -106,6 +110,9 @@ export function SettingsClientStorageRouteScreen() {
                   savedConnectionsById[environment.environmentId]?.environmentLabel ??
                   environment.environmentId
                 }
+                machine={resolveEnvironmentMachineKind(
+                  serverConfigs.get(environment.environmentId) ?? null,
+                )}
                 disabled={isClearing}
                 first={index === 0}
                 onClear={() => confirmClearEnvironment(environment)}
 @@ -169,6 +176,7 @@ export function SettingsClientStorageRouteScreen() {
 function CacheEnvironmentRow(props: {
   readonly environment: EnvironmentClientCacheSummary;
   readonly environmentLabel: string;
+  readonly machine: EnvironmentMachineKind;
   readonly disabled: boolean;
   readonly first: boolean;
   readonly onClear: () => void;
 @@ -181,13 +189,7 @@ function CacheEnvironmentRow(props: {
           : "border-t border-border flex-row items-center gap-3 p-4"
       }
     >
-      <SymbolView
+      <EnvironmentMachineSymbol kind={props.machine} size={22} tintColorClassName="accent-icon" />
-        name="desktopcomputer"
-        size={22}
-        tintColorClassName={"accent-icon"}
-        type="monochrome"
-        weight="regular"
-      />
       <Text className="min-w-0 flex-1 text-base text-foreground" numberOfLines={1}>
         {props.environmentLabel}
       </Text>

apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx+19-5

 @@ -1,4 +1,5 @@
 import type { VcsRef } from "@t3tools/client-runtime/state/vcs";
+import { resolveEnvironmentMachineKind } from "@t3tools/contracts";
 import { LegendList } from "@legendapp/list/react-native";
 import {
   isAtomCommandInterrupted,
 @@ -21,9 +22,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { SymbolView } from "../../components/AppSymbol";
 import { AppText as Text } from "../../components/AppText";
+import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol";
 import { ThemedSwitch } from "../../components/ThemedSwitch";
 import { cn } from "../../lib/cn";
 import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
+import { useServerConfigs } from "../../state/entities";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { vcsEnvironment } from "../../state/vcs";
 import {
 @@ -35,7 +38,7 @@ import { branchBadgeLabel, useNewTaskFlow } from "./new-task-flow-provider";
 import { shouldCheckoutNewTaskBranch } from "./new-task-context-presentation";
 function SelectionRow(props: {
-  readonly icon?: "arrow.triangle.branch" | "desktopcomputer";
+  readonly icon?: "arrow.triangle.branch" | ReactNode;
   readonly onPress: () => void;
   readonly disabled?: boolean;
   readonly selected: boolean;
 @@ -56,14 +59,16 @@ function SelectionRow(props: {
       onPress={props.onPress}
       style={{ opacity: props.disabled ? 0.45 : 1 }}
     >
-      {props.icon ? (
+      {props.icon === "arrow.triangle.branch" ? (
         <SymbolView
-          name={props.icon}
+          name="arrow.triangle.branch"
           size={17}
           tintColorClassName={"accent-icon-muted"}
           type="monochrome"
         />
-      ) : null}
+      ) : (
+        (props.icon ?? null)
+      )}
       <View className="min-w-0 flex-1 gap-0.5">
         <Text className="text-base font-t3-medium text-foreground" numberOfLines={1}>
           {props.title}
 @@ -145,6 +150,7 @@ export function NewTaskEnvironmentPickerRouteScreen() {
   const flow = useNewTaskFlow();
   const navigation = useNavigation();
   const insets = useSafeAreaInsets();
+  const serverConfigs = useServerConfigs();
   return (
     <View className="flex-1 bg-sheet" collapsable={false}>
 @@ -170,7 +176,15 @@ export function NewTaskEnvironmentPickerRouteScreen() {
           {flow.environments.map((environment, index) => (
             <SelectionRow
               key={String(environment.environmentId)}
-              icon="desktopcomputer"
+              icon={
+                <EnvironmentMachineSymbol
+                  kind={resolveEnvironmentMachineKind(
+                    serverConfigs.get(environment.environmentId) ?? null,
+                  )}
+                  size={17}
+                  tintColorClassName="accent-icon-muted"
+                />
+              }
               isLast={index === flow.environments.length - 1}
               onPress={() => {
                 void Haptics.selectionAsync();

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx+12-2

 @@ -24,7 +24,10 @@ import {
   isAtomCommandInterrupted,
   squashAtomCommandFailure,
 } from "@t3tools/client-runtime/state/runtime";
-import { PROVIDER_SEND_TURN_MAX_ATTACHMENTS } from "@t3tools/contracts";
+import {
+  PROVIDER_SEND_TURN_MAX_ATTACHMENTS,
+  resolveEnvironmentMachineKind,
+} from "@t3tools/contracts";
 import { ComposerEditor, type ComposerEditorHandle } from "../../components/ComposerEditor";
 import {
 @@ -36,6 +39,7 @@ import {
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";
 import { ComposerAttachmentStrip } from "../../components/ComposerAttachmentStrip";
+import { EnvironmentMachineSymbol } from "../../components/EnvironmentMachineSymbol";
 import {
   composerAttachmentUploadBlockReason,
   composerAttachmentUploadsAtom,
 @@ -1129,7 +1133,13 @@ export function NewTaskDraftScreen(props: {
         accessibilityLabel={`Environment: ${selectedEnvironmentLabel}`}
         chevronDirection="right"
         disabled={isComposerInteractionLocked || voiceInput.isBusy}
-        icon="desktopcomputer"
+        iconNode={
+          <EnvironmentMachineSymbol
+            kind={resolveEnvironmentMachineKind(selectedEnvironmentServerConfig)}
+            size={16}
+            tintColorClassName="accent-icon-muted"
+          />
+        }
         label={`on ${selectedEnvironmentLabel}`}
         maxWidth={260}
         onPress={

apps/web/src/components/BranchToolbarEnvironmentSelector.tsx+10-16

 @@ -1,8 +1,8 @@
 import type { EnvironmentId } from "@t3tools/contracts";
-import { CloudIcon, MonitorIcon } from "lucide-react";
 import { memo, useMemo } from "react";
 import type { EnvironmentOption } from "./BranchToolbar.logic";
+import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
 import {
   Select,
   SelectGroup,
 @@ -52,11 +52,10 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
         className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:h-6 sm:text-xs"
         data-composer-context-control
       >
-        {activeEnvironment?.isPrimary ? (
+        <EnvironmentMachineIcon
-          <MonitorIcon className="size-3 shrink-0" />
+          kind={activeEnvironment?.machine ?? "server"}
-        ) : (
+          className="size-3 shrink-0"
-          <CloudIcon className="size-3 shrink-0" />
+        />
-        )}
         <span
           data-composer-label
           className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
 @@ -86,11 +85,10 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
         aria-label="Run on"
         data-composer-context-control
       >
-        {activeEnvironment?.isPrimary ? (
+        <EnvironmentMachineIcon
-          <MonitorIcon className="size-3 shrink-0" />
+          kind={activeEnvironment?.machine ?? "server"}
-        ) : (
+          className="size-3 shrink-0"
-          <CloudIcon className="size-3 shrink-0" />
+        />
-        )}
         <span
           data-composer-label
           className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
 @@ -109,11 +107,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
           {availableEnvironments.map((env) => (
             <SelectItem key={env.environmentId} value={env.environmentId}>
               <span className="inline-flex items-center gap-1.5">
-                {env.isPrimary ? (
+                <EnvironmentMachineIcon kind={env.machine} className="size-3" />
-                  <MonitorIcon className="size-3" />
-                ) : (
-                  <CloudIcon className="size-3" />
-                )}
                 {env.label}
               </span>
             </SelectItem>

apps/web/src/components/CommandPalette.tsx+9-2

 @@ -36,6 +36,7 @@ import {
   type SourceControlProviderKind,
   type SourceControlRepositoryInfo,
   PRIMARY_LOCAL_ENVIRONMENT_ID,
+  resolveEnvironmentMachineKind,
 } from "@t3tools/contracts";
 import { useLocation, useNavigate, useParams } from "@tanstack/react-router";
 import * as Option from "effect/Option";
 @@ -48,7 +49,6 @@ import {
   LinkIcon,
   MessageSquareIcon,
   PaletteIcon,
-  ServerIcon,
   SettingsIcon,
   SquarePenIcon,
   TextSearchIcon,
 @@ -145,6 +145,7 @@ import { resolveEnvironmentOptionLabel } from "./BranchToolbar.logic";
 import { CommandPaletteContent } from "./CommandPaletteContent";
 import { CommandPaletteResults } from "./CommandPaletteResults";
 import { AzureDevOpsIcon, BitbucketIcon, GitHubIcon, GitLabIcon } from "./Icons";
+import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
 import { ProjectFavicon } from "./ProjectFavicon";
 import { ProjectFilePicker } from "./files/ProjectFilePicker";
 import { ProjectContentSearchDialog } from "./search/ProjectContentSearchDialog";
 @@ -738,6 +739,7 @@ function OpenCommandPaletteDialog(props: {
                 : isLocal
                   ? `${environment.label} (Local)`
                   : environment.label,
+              machine: resolveEnvironmentMachineKind(environment.serverConfig),
             },
           ] as const;
         }),
 @@ -1119,12 +1121,17 @@ function OpenCommandPaletteDialog(props: {
             const location = projectEnvironmentLocationById.get(project.environmentId) ?? {
               kind: "remote",
               label: "Remote",
+              machine: "server" as const,
             };
             return (
               <span className="flex min-w-0 items-center gap-1">
                 <span className="inline-flex min-w-0 items-center gap-1">
                   {location.kind === "remote" ? (
-                    <ServerIcon aria-hidden className={COMMAND_PALETTE_META_ICON_CLASS} />
+                    <EnvironmentMachineIcon
+                      aria-hidden
+                      kind={location.machine}
+                      className={COMMAND_PALETTE_META_ICON_CLASS}
+                    />
                   ) : null}
                   <span className="truncate">{location.label}</span>
                 </span>

apps/web/src/components/ThreadStatusIndicators.tsx+16-5

 @@ -4,12 +4,18 @@ import {
   scopeThreadRef,
 } from "@t3tools/client-runtime/environment";
 import { pullRequestDetailToVcsStatus } from "@t3tools/client-runtime/state/pull-requests";
-import type { EnvironmentId, ThreadLinkedPullRequest, VcsStatusResult } from "@t3tools/contracts";
+import {
+  type EnvironmentId,
+  resolveEnvironmentMachineKind,
+  type ThreadLinkedPullRequest,
+  type VcsStatusResult,
+} from "@t3tools/contracts";
 import { Atom } from "effect/unstable/reactivity";
-import { CloudIcon, FolderGit2Icon, GitPullRequestIcon, TerminalIcon } from "lucide-react";
+import { FolderGit2Icon, GitPullRequestIcon, TerminalIcon } from "lucide-react";
 import { useMemo } from "react";
 import { appAtomRegistry } from "../rpc/atomRegistry";
 import { useEnvironment, usePrimaryEnvironmentId } from "../state/environments";
+import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
 import { useProject } from "../state/entities";
 import { useEnvironmentQuery } from "../state/query";
 import { linkedPullRequestDetailAtom, useSharedPullRequestSummary } from "../state/pullRequests";
 @@ -602,10 +608,12 @@ export function ThreadRowTrailingStatus({ thread }: { thread: SidebarThreadSumma
   });
   const environment = useEnvironment(thread.environmentId);
   const primaryEnvironmentId = usePrimaryEnvironmentId();
-  const isRemoteThread =
+  // No primary (the hosted app) means every thread is remote, and the machine
-    primaryEnvironmentId !== null && thread.environmentId !== primaryEnvironmentId;
+  // glyph is what tells the environments apart.
+  const isRemoteThread = thread.environmentId !== primaryEnvironmentId;
   const remoteEnvLabel = environment?.label ?? null;
   const threadEnvironmentLabel = isRemoteThread ? (remoteEnvLabel ?? "Remote") : null;
+  const remoteMachine = resolveEnvironmentMachineKind(environment?.serverConfig ?? null);
   const terminalStatus = terminalStatusFromRunningIds(runningTerminalIds);
   if (!terminalStatus && !isRemoteThread) {
 @@ -642,7 +650,10 @@ export function ThreadRowTrailingStatus({ thread }: { thread: SidebarThreadSumma
               />
             }
           >
-            <CloudIcon className="size-3 text-muted-foreground/60" />
+            <EnvironmentMachineIcon
+              kind={remoteMachine}
+              className="size-3 text-muted-foreground/60"
+            />
           </TooltipTrigger>
           <TooltipPopup side="top">{threadEnvironmentLabel}</TooltipPopup>
         </Tooltip>

apps/web/src/components/settings/ProviderSettingsPanel.tsx+9-20

 @@ -12,6 +12,7 @@ import {
   ProviderDriverKind,
   type ProviderInstanceConfig,
   type ProviderInstanceId,
+  resolveEnvironmentMachineKind,
   resolveProviderInstanceEnabled,
 } from "@t3tools/contracts";
 import { DEFAULT_UNIFIED_SETTINGS } from "@t3tools/contracts/settings";
 @@ -23,22 +24,14 @@ import * as Arr from "effect/Array";
 import * as Duration from "effect/Duration";
 import * as Equal from "effect/Equal";
 import * as Result from "effect/Result";
-import {
+import { ChevronDownIcon, LoaderIcon, PlusIcon, RefreshCwIcon } from "lucide-react";
-  ChevronDownIcon,
-  CloudIcon,
-  LaptopIcon,
-  LoaderIcon,
-  MonitorIcon,
-  PlusIcon,
-  RefreshCwIcon,
-  TerminalIcon,
-} from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { isDesktopLocalConnectionTarget } from "../../connection/desktopLocal";
 import { isElectron } from "../../env";
 import { usePrimarySessionState } from "../../environments/primary";
 import { useEnvironmentSettings, useUpdateEnvironmentSettings } from "../../hooks/useSettings";
+import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
 import { cn } from "../../lib/utils";
 import { resolveAppModelSelectionState } from "../../modelSelection";
 import {
 @@ -152,14 +145,6 @@ function ProviderLastChecked({ lastCheckedAt }: { lastCheckedAt: string | null }
   );
 }
-function providerEnvironmentIcon(environment: EnvironmentPresentation) {
-  if (environment.entry.target._tag === "PrimaryConnectionTarget") return MonitorIcon;
-  if (environment.entry.target._tag === "RelayConnectionTarget") return CloudIcon;
-  if (environment.entry.target._tag === "SshConnectionTarget") return TerminalIcon;
-  if (isDesktopLocalConnectionTarget(environment.entry.target)) return LaptopIcon;
-  return CloudIcon;
-}
 function providerEnvironmentDetail(environment: EnvironmentPresentation): string {
   if (environment.entry.target._tag === "PrimaryConnectionTarget") return "Primary device";
   if (environment.relayManaged) return "T3 Connect";
 @@ -259,7 +244,7 @@ function ProviderSettingsPanelContent() {
           className="flex h-full w-max min-w-full border-b border-border/70 px-1"
         >
           {options.map((environment) => {
-            const Icon = providerEnvironmentIcon(environment);
+            const machine = resolveEnvironmentMachineKind(environment.serverConfig);
             const selected = environment.environmentId === effectiveEnvironmentId;
             const detail = providerEnvironmentDetail(environment);
             const statusText = connectionStatusText(environment.connection);
 @@ -273,7 +258,11 @@ function ProviderSettingsPanelContent() {
                       className={cn(providerSettingsTabClassName(selected), "gap-2 text-left")}
                       onClick={() => setSelectedEnvironmentId(environment.environmentId)}
                     >
-                      <Icon className="size-3.5 shrink-0" aria-hidden />
+                      <EnvironmentMachineIcon
+                        kind={machine}
+                        className="size-3.5 shrink-0"
+                        aria-hidden
+                      />
                       <span className="max-w-40 truncate">{environment.label}</span>
                       {environment.connection.phase !== "connected" ? (
                         <ConnectionStatusDot

docs/user/thread-sidebar.md+4-2

...	@@ -59,8 +59,10 @@ When you are connected to more than one environment, every thread that lives som	...	@@ -59,8 +59,10 @@ When you are connected to more than one environment, every thread that lives som
59	the machine you are on wears a small icon for that machine at the end of its row: a server, a cloud	59	the machine you are on wears a small icon for that machine at the end of its row: a server, a cloud
60	VM, a desktop, a laptop, a Mac mini, or a Mac Studio. In the hosted web app and the mobile app,	60	VM, a desktop, a laptop, a Mac mini, or a Mac Studio. In the hosted web app and the mobile app,
61	where every environment is remote, each row wears its machine so you can tell them apart at a	61	where every environment is remote, each row wears its machine so you can tell them apart at a
62	glance. The same icon appears in the thread tooltip, the "Run on" picker, the pull request server	62	glance. The same icon appears wherever an environment is named: the thread tooltip, the command
63	filter, and the environment lists under Settings → Connections.	63	palette, the "Run on" picker, the pull request server filter, the provider settings device tabs,
		64	and the environment lists under Settings → Connections. On mobile it appears in the thread
		65	lists, the archive, the new-task environment picker, and the Environments and storage settings.
64		66
65	Servers pick the icon themselves from the hardware they run on. A Mac reports its model, a Linux	67	Servers pick the icon themselves from the hardware they run on. A Mac reports its model, a Linux
66	machine reports its chassis type and whether it is a virtual machine, and anything without a usable	68	machine reports its chassis type and whether it is a virtual machine, and anything without a usable

author	Julius Marminge <julius0216@outlook.com> 2026-09-02 23:23:44-07:00
committer	GitHub <noreply@github.com> 2026-09-02 23:23:44-07:00
log	829c3db94830fc70b5754513b8a370f7301ca213
tree	c06233d52836383e03d9ae02a55f6f65a8500212
parent	5eb4f452ee0fcde7b5bbc93d62de9118b70a33b2
signature	Signed by PGP key B5690EEEBB952194

fix(environments): draw the machine icon everywhere an environment is named (#9365)